<!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>1&period; Vue3&#x7b80;&#x4ecb;</title>
            <style>
/* From extension vscode.github */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],
.vscode-light img[src$=\#gh-dark-mode-only],
.vscode-high-contrast:not(.vscode-high-contrast-light) img[src$=\#gh-light-mode-only],
.vscode-high-contrast-light img[src$=\#gh-dark-mode-only] {
	display: none;
}

</style>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
<link href="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item {
    list-style-type: none;
}

.task-list-item-checkbox {
    margin-left: -20px;
    vertical-align: middle;
    pointer-events: none;
}
</style>
<style>
:root {
  --color-note: #0969da;
  --color-tip: #1a7f37;
  --color-warning: #9a6700;
  --color-severe: #bc4c00;
  --color-caution: #d1242f;
  --color-important: #8250df;
}

</style>
<style>
@media (prefers-color-scheme: dark) {
  :root {
    --color-note: #2f81f7;
    --color-tip: #3fb950;
    --color-warning: #d29922;
    --color-severe: #db6d28;
    --color-caution: #f85149;
    --color-important: #a371f7;
  }
}

</style>
<style>
.markdown-alert {
  padding: 0.5rem 1rem;
  margin-bottom: 16px;
  color: inherit;
  border-left: .25em solid #888;
}

.markdown-alert>:first-child {
  margin-top: 0
}

.markdown-alert>:last-child {
  margin-bottom: 0
}

.markdown-alert .markdown-alert-title {
  display: flex;
  font-weight: 500;
  align-items: center;
  line-height: 1
}

.markdown-alert .markdown-alert-title .octicon {
  margin-right: 0.5rem;
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}

.markdown-alert.markdown-alert-note {
  border-left-color: var(--color-note);
}

.markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--color-note);
}

.markdown-alert.markdown-alert-important {
  border-left-color: var(--color-important);
}

.markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--color-important);
}

.markdown-alert.markdown-alert-warning {
  border-left-color: var(--color-warning);
}

.markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--color-warning);
}

.markdown-alert.markdown-alert-tip {
  border-left-color: var(--color-tip);
}

.markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--color-tip);
}

.markdown-alert.markdown-alert-caution {
  border-left-color: var(--color-caution);
}

.markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--color-caution);
}

</style>
        
        </head>
        <body class="vscode-body vscode-light">
            <h1 id="1-vue3简介">1. Vue3简介</h1>
<ul>
<li>
<p>2020年9月18日，<code>Vue.js</code>发布版<code>3.0</code>版本，代号：<code>One Piece</code>（n</p>
</li>
<li>
<p>经历了：<a href="https://github.com/vuejs/core/commits/main">4800+次提交</a>、<a href="https://github.com/vuejs/rfcs/tree/master/active-rfcs">40+个RFC</a>、<a href="https://github.com/vuejs/vue-next/pulls?q=is%3Apr+is%3Amerged+-author%3Aapp%2Fdependabot-preview+">600+次PR</a>、<a href="https://github.com/vuejs/core/graphs/contributors">300+贡献者</a></p>
</li>
<li>
<p>官方发版地址：<a href="https://github.com/vuejs/core/releases/tag/v3.0.0">Release v3.0.0 One Piece · vuejs/core</a></p>
</li>
<li>
<p>截止2023年10月，最新的公开版本为：<code>3.3.4</code></p>
<img src="file:///c:\workspace\vue3+ts\资料\images\1695089947298-161c1b47-eb86-42fb-b1f8-d6a4fcab8ee2.png" alt="image.png" style="zoom:30%;" /> 
</li>
</ul>
<h2 id="11-性能的提升">1.1. 【性能的提升】</h2>
<ul>
<li>
<p>打包大小减少<code>41%</code>。</p>
</li>
<li>
<p>初次渲染快<code>55%</code>, 更新渲染快<code>133%</code>。</p>
</li>
<li>
<p>内存减少<code>54%</code>。</p>
</li>
</ul>
<h2 id="12-源码的升级">1.2.【 源码的升级】</h2>
<ul>
<li>
<p>使用<code>Proxy</code>代替<code>defineProperty</code>实现响应式。</p>
</li>
<li>
<p>重写虚拟<code>DOM</code>的实现和<code>Tree-Shaking</code>。</p>
</li>
</ul>
<h2 id="13-拥抱typescript">1.3. 【拥抱TypeScript】</h2>
<ul>
<li><code>Vue3</code>可以更好的支持<code>TypeScript</code>。</li>
</ul>
<h2 id="14-新的特性">1.4. 【新的特性】</h2>
<ol>
<li>
<p><code>Composition API</code>（组合<code>API</code>）：</p>
<ul>
<li>
<p><code>setup</code></p>
</li>
<li>
<p><code>ref</code>与<code>reactive</code></p>
</li>
<li>
<p><code>computed</code>与<code>watch</code></p>
<p>......</p>
</li>
</ul>
</li>
<li>
<p>新的内置组件：</p>
<ul>
<li>
<p><code>Fragment</code></p>
</li>
<li>
<p><code>Teleport</code></p>
</li>
<li>
<p><code>Suspense</code></p>
<p>......</p>
</li>
</ul>
</li>
<li>
<p>其他改变：</p>
<ul>
<li>
<p>新的生命周期钩子</p>
</li>
<li>
<p><code>data</code> 选项应始终被声明为一个函数</p>
</li>
<li>
<p>移除<code>keyCode</code>支持作为<code> v-on</code> 的修饰符</p>
<p>......</p>
</li>
</ul>
</li>
</ol>
<h1 id="2-创建vue3工程">2. 创建Vue3工程</h1>
<h2 id="21-基于-vue-cli-创建">2.1. 【基于 vue-cli 创建】</h2>
<p>点击查看<a href="https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create">官方文档</a></p>
<blockquote>
<p>备注：目前<code>vue-cli</code>已处于维护模式，官方推荐基于 <code>Vite</code> 创建项目。</p>
</blockquote>
<pre><code class="language-powershell"><span class="hljs-comment">## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上</span>
vue <span class="hljs-literal">--version</span>

<span class="hljs-comment">## 安装或者升级你的@vue/cli </span>
npm install <span class="hljs-literal">-g</span> @vue/<span class="hljs-built_in">cli</span>

<span class="hljs-comment">## 执行创建命令</span>
vue create vue_test

<span class="hljs-comment">##  随后选择3.x</span>
<span class="hljs-comment">##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)</span>
<span class="hljs-comment">##  &gt; 3.x</span>
<span class="hljs-comment">##    2.x</span>

<span class="hljs-comment">## 启动</span>
<span class="hljs-built_in">cd</span> vue_test
npm run serve
</code></pre>
<hr>
<h2 id="22-基于-vite-创建推荐">2.2. 【基于 vite 创建】(推荐)</h2>
<p><code>vite</code> 是新一代前端构建工具，官网地址：<a href="https://vitejs.cn/">https://vitejs.cn</a>，<code>vite</code>的优势如下：</p>
<ul>
<li>轻量快速的热重载（<code>HMR</code>），能实现极速的服务启动。</li>
<li>对 <code>TypeScript</code>、<code>JSX</code>、<code>CSS</code> 等支持开箱即用。</li>
<li>真正的按需编译，不再等待整个应用编译完成。</li>
<li><code>webpack</code>构建 与 <code>vite</code>构建对比图如下：
<img src="file:///c:\workspace\vue3+ts\资料\images\1683167182037-71c78210-8217-4e7d-9a83-e463035efbbe.png" alt="webpack构建" title="webpack构建" style="zoom:20%;box-shadow:0 0 10px black" />	<img src="file:///c:\workspace\vue3+ts\资料\images\1683167204081-582dc237-72bc-499e-9589-2cdfd452e62f.png" alt="vite构建" title="vite构建" style="zoom: 20%;box-shadow:0 0 10px black" /></li>
</ul>
<ul>
<li>具体操作如下（点击查看<a href="https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application">官方文档</a>）</li>
</ul>
<pre><code class="language-powershell"><span class="hljs-comment">## 1.创建命令</span>
npm create vue@latest

<span class="hljs-comment">## 2.具体配置</span>
<span class="hljs-comment">## 配置项目名称</span>
√ Project name: vue3_test
<span class="hljs-comment">## 是否添加TypeScript支持</span>
√ Add TypeScript?  Yes
<span class="hljs-comment">## 是否添加JSX支持</span>
√ Add JSX Support?  No
<span class="hljs-comment">## 是否添加路由环境</span>
√ Add Vue Router <span class="hljs-keyword">for</span> Single Page Application development?  No
<span class="hljs-comment">## 是否添加pinia环境</span>
√ Add Pinia <span class="hljs-keyword">for</span> state management?  No
<span class="hljs-comment">## 是否添加单元测试</span>
√ Add Vitest <span class="hljs-keyword">for</span> Unit Testing?  No
<span class="hljs-comment">## 是否添加端到端测试方案</span>
√ Add an <span class="hljs-keyword">End</span><span class="hljs-literal">-to-End</span> Testing Solution? » No
<span class="hljs-comment">## 是否添加ESLint语法检查</span>
√ Add ESLint <span class="hljs-keyword">for</span> code quality?  Yes
<span class="hljs-comment">## 是否添加Prettiert代码格式化</span>
√ Add Prettier <span class="hljs-keyword">for</span> code formatting?  No
</code></pre>
<p>自己动手编写一个App组件</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;app&quot;&gt;
    &lt;h1&gt;你好啊！&lt;/h1&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot;&gt;
  export default {
    name:'App' //组件名
  }
&lt;/script&gt;

&lt;style&gt;
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
&lt;/style&gt;
</code></pre>
<p>安装官方推荐的<code>vscode</code>插件：</p>
<img src="file:///c:\workspace\vue3+ts\资料\images\volar.png" alt="Snipaste_2023-10-08_20-46-34" style="zoom:50%;" /> 
<img src="file:///c:\workspace\vue3+ts\资料\images\image-20231218085906380.png" alt="image-20231218085906380" style="zoom:42%;" /> 
<p>总结：</p>
<ul>
<li><code>Vite</code> 项目中，<code>index.html</code> 是项目的入口文件，在项目最外层。</li>
<li>加载<code>index.html</code>后，<code>Vite</code> 解析 <code>&lt;script type=&quot;module&quot; src=&quot;xxx&quot;&gt;</code> 指向的<code>JavaScript</code>。</li>
<li><code>Vue3</code>**中是通过 **<code>createApp</code> 函数创建一个应用实例。</li>
</ul>
<h2 id="23-一个简单的效果">2.3. 【一个简单的效果】</h2>
<p><code>Vue3</code>向下兼容<code>Vue2</code>语法，且<code>Vue3</code>中的模板中可以没有根标签</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h2&gt;姓名：{{name}}&lt;/h2&gt;
    &lt;h2&gt;年龄：{{age}}&lt;/h2&gt;
    &lt;button @click=&quot;changeName&quot;&gt;修改名字&lt;/button&gt;
    &lt;button @click=&quot;changeAge&quot;&gt;年龄+1&lt;/button&gt;
    &lt;button @click=&quot;showTel&quot;&gt;点我查看联系方式&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot;&gt;
  export default {
    name:'App',
    data() {
      return {
        name:'张三',
        age:18,
        tel:'13888888888'
      }
    },
    methods:{
      changeName(){
        this.name = 'zhang-san'
      },
      changeAge(){
        this.age += 1
      },
      showTel(){
        alert(this.tel)
      }
    },
  }
&lt;/script&gt;
</code></pre>
<h1 id="3-vue3核心语法">3. Vue3核心语法</h1>
<h2 id="31--optionsapi-与-compositionapi">3.1.  【OptionsAPI 与 CompositionAPI】</h2>
<ul>
<li><code>Vue2</code>的<code>API</code>设计是<code>Options</code>（配置）风格的。</li>
<li><code>Vue3</code>的<code>API</code>设计是<code>Composition</code>（组合）风格的。</li>
</ul>
<h3 id="options-api-的弊端">Options API 的弊端</h3>
<p><code>Options</code>类型的 <code>API</code>，数据、方法、计算属性等，是分散在：<code>data</code>、<code>methods</code>、<code>computed</code>中的，若想新增或者修改一个需求，就需要分别修改：<code>data</code>、<code>methods</code>、<code>computed</code>，不便于维护和复用。</p>
<p><img src="file:///c:\workspace\vue3+ts\资料\images\1696662197101-55d2b251-f6e5-47f4-b3f1-d8531bbf9279.gif" alt="1.gif" style="zoom:70%;border-radius:20px" /><img src="file:///c:\workspace\vue3+ts\资料\images\1696662200734-1bad8249-d7a2-423e-a3c3-ab4c110628be.gif" alt="2.gif" style="zoom:70%;border-radius:20px" /></p>
<h3 id="composition-api-的优势">Composition API 的优势</h3>
<p>可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。</p>
<p><img src="file:///c:\workspace\vue3+ts\资料\images\1696662249851-db6403a1-acb5-481a-88e0-e1e34d2ef53a.gif" alt="3.gif" style="height:300px;border-radius:10px"  /><img src="file:///c:\workspace\vue3+ts\资料\images\1696662256560-7239b9f9-a770-43c1-9386-6cc12ef1e9c0.gif" alt="4.gif" style="height:300px;border-radius:10px"  /></p>
<blockquote>
<p>说明：以上四张动图原创作者：大帅老猿</p>
</blockquote>
<h2 id="32-拉开序幕的-setup">3.2. 【拉开序幕的 setup】</h2>
<h3 id="setup-概述">setup 概述</h3>
<p><code>setup</code>是<code>Vue3</code>中一个新的配置项，值是一个函数，它是 <code>Composition API</code> <strong>“表演的舞台</strong><em><strong>”</strong></em>，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在<code>setup</code>中。</p>
<p>特点如下：</p>
<ul>
<li><code>setup</code>函数返回的对象中的内容，可直接在模板中使用。</li>
<li><code>setup</code>中访问<code>this</code>是<code>undefined</code>。</li>
<li><code>setup</code>函数会在<code>beforeCreate</code>之前调用，它是“领先”所有钩子执行的。</li>
</ul>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h2&gt;姓名：{{name}}&lt;/h2&gt;
    &lt;h2&gt;年龄：{{age}}&lt;/h2&gt;
    &lt;button @click=&quot;changeName&quot;&gt;修改名字&lt;/button&gt;
    &lt;button @click=&quot;changeAge&quot;&gt;年龄+1&lt;/button&gt;
    &lt;button @click=&quot;showTel&quot;&gt;点我查看联系方式&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot;&gt;
  export default {
    name:'Person',
    setup(){
      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'
      let age = 18
      let tel = '13888888888'

      // 方法，原来写在methods中
      function changeName(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意：此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }

      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
&lt;/script&gt;
</code></pre>
<h3 id="setup-的返回值">setup 的返回值</h3>
<ul>
<li>若返回一个<strong>对象</strong>：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**</li>
<li>若返回一个<strong>函数</strong>：则可以自定义渲染内容，代码如下：</li>
</ul>
<pre><code class="language-jsx"><span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>){
  <span class="hljs-keyword">return</span> <span class="hljs-function">()=&gt;</span> <span class="hljs-string">&#x27;你好啊！&#x27;</span>
}
</code></pre>
<h3 id="setup-与-options-api-的关系">setup 与 Options API 的关系</h3>
<ul>
<li><code>Vue2</code> 的配置（<code>data</code>、<code>methos</code>......）中<strong>可以访问到</strong> <code>setup</code>中的属性、方法。</li>
<li>但在<code>setup</code>中<strong>不能访问到</strong><code>Vue2</code>的配置（<code>data</code>、<code>methos</code>......）。</li>
<li>如果与<code>Vue2</code>冲突，则<code>setup</code>优先。</li>
</ul>
<h3 id="setup-语法糖">setup 语法糖</h3>
<p><code>setup</code>函数有一个语法糖，这个语法糖，可以让我们把<code>setup</code>独立出去，代码如下：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h2&gt;姓名：{{name}}&lt;/h2&gt;
    &lt;h2&gt;年龄：{{age}}&lt;/h2&gt;
    &lt;button @click=&quot;changName&quot;&gt;修改名字&lt;/button&gt;
    &lt;button @click=&quot;changAge&quot;&gt;年龄+1&lt;/button&gt;
    &lt;button @click=&quot;showTel&quot;&gt;点我查看联系方式&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot;&gt;
  export default {
    name:'Person',
  }
&lt;/script&gt;

&lt;!-- 下面的写法是setup语法糖 --&gt;
&lt;script setup lang=&quot;ts&quot;&gt;
  console.log(this) //undefined
  
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let name = '张三'
  let age = 18
  let tel = '13888888888'

  // 方法
  function changName(){
    name = '李四'//注意：此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意：此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
&lt;/script&gt;
</code></pre>
<p>扩展：上述代码，还需要编写一个不写<code>setup</code>的<code>script</code>标签，去指定组件名字，比较麻烦，我们可以借助<code>vite</code>中的插件简化</p>
<ol>
<li>第一步：<code>npm i vite-plugin-vue-setup-extend -D</code></li>
<li>第二步：<code>vite.config.ts</code></li>
</ol>
<pre><code class="language-jsx"><span class="hljs-keyword">import</span> { defineConfig } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vite&#x27;</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">VueSetupExtend</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vite-plugin-vue-setup-extend&#x27;</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title function_">defineConfig</span>({
  <span class="hljs-attr">plugins</span>: [ <span class="hljs-title class_">VueSetupExtend</span>() ]
})
</code></pre>
<ol start="3">
<li>第三步：<code>&lt;script setup lang=&quot;ts&quot; name=&quot;Person&quot;&gt;</code></li>
</ol>
<h2 id="33-ref-创建基本类型的响应式数据">3.3. 【ref 创建：基本类型的响应式数据】</h2>
<ul>
<li>**作用：**定义响应式变量。</li>
<li><strong>语法：</strong><code>let xxx = ref(初始值)</code>。</li>
<li>**返回值：**一个<code>RefImpl</code>的实例对象，简称<code>ref对象</code>或<code>ref</code>，<code>ref</code>对象的<code>value</code><strong>属性是响应式的</strong>。</li>
<li><strong>注意点：</strong>
<ul>
<li><code>JS</code>中操作数据需要：<code>xxx.value</code>，但模板中不需要<code>.value</code>，直接使用即可。</li>
<li>对于<code>let name = ref('张三')</code>来说，<code>name</code>不是响应式的，<code>name.value</code>是响应式的。</li>
</ul>
</li>
</ul>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h2&gt;姓名：{{name}}&lt;/h2&gt;
    &lt;h2&gt;年龄：{{age}}&lt;/h2&gt;
    &lt;button @click=&quot;changeName&quot;&gt;修改名字&lt;/button&gt;
    &lt;button @click=&quot;changeAge&quot;&gt;年龄+1&lt;/button&gt;
    &lt;button @click=&quot;showTel&quot;&gt;点我查看联系方式&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;Person&quot;&gt;
  import {ref} from 'vue'
  // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
  let name = ref('张三')
  let age = ref(18)
  // tel就是一个普通的字符串，不是响应式的
  let tel = '13888888888'

  function changeName(){
    // JS中操作ref对象时候需要.value
    name.value = '李四'
    console.log(name.value)

    // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
    // name = ref('zhang-san')
  }
  function changeAge(){
    // JS中操作ref对象时候需要.value
    age.value += 1 
    console.log(age.value)
  }
  function showTel(){
    alert(tel)
  }
&lt;/script&gt;
</code></pre>
<h2 id="34-reactive-创建对象类型的响应式数据">3.4. 【reactive 创建：对象类型的响应式数据】</h2>
<ul>
<li><strong>作用：<strong>定义一个</strong>响应式对象</strong>（基本类型不要用它，要用<code>ref</code>，否则报错）</li>
<li><strong>语法：</strong><code>let 响应式对象= reactive(源对象)</code>。</li>
<li>**返回值：**一个<code>Proxy</code>的实例对象，简称：响应式对象。</li>
<li><strong>注意点：</strong><code>reactive</code>定义的响应式数据是“深层次”的。</li>
</ul>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h2&gt;汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万&lt;/h2&gt;
    &lt;h2&gt;游戏列表：&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li v-for=&quot;g in games&quot; :key=&quot;g.id&quot;&gt;{{ g.name }}&lt;/li&gt;
    &lt;/ul&gt;
    &lt;h2&gt;测试：{{obj.a.b.c.d}}&lt;/h2&gt;
    &lt;button @click=&quot;changeCarPrice&quot;&gt;修改汽车价格&lt;/button&gt;
    &lt;button @click=&quot;changeFirstGame&quot;&gt;修改第一游戏&lt;/button&gt;
    &lt;button @click=&quot;test&quot;&gt;测试&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
import { reactive } from 'vue'

// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

function changeCarPrice() {
  car.price += 10
}
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}
function test(){
  obj.a.b.c.d = 999
}
&lt;/script&gt;
</code></pre>
<h2 id="35-ref-创建对象类型的响应式数据">3.5. 【ref 创建：对象类型的响应式数据】</h2>
<ul>
<li>其实<code>ref</code>接收的数据可以是：<strong>基本类型</strong>、<strong>对象类型</strong>。</li>
<li>若<code>ref</code>接收的是对象类型，内部其实也是调用了<code>reactive</code>函数。</li>
</ul>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h2&gt;汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万&lt;/h2&gt;
    &lt;h2&gt;游戏列表：&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li v-for=&quot;g in games&quot; :key=&quot;g.id&quot;&gt;{{ g.name }}&lt;/li&gt;
    &lt;/ul&gt;
    &lt;h2&gt;测试：{{obj.a.b.c.d}}&lt;/h2&gt;
    &lt;button @click=&quot;changeCarPrice&quot;&gt;修改汽车价格&lt;/button&gt;
    &lt;button @click=&quot;changeFirstGame&quot;&gt;修改第一游戏&lt;/button&gt;
    &lt;button @click=&quot;test&quot;&gt;测试&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
import { ref } from 'vue'

// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

console.log(car)

function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑'
}
function test(){
  obj.value.a.b.c.d = 999
}
&lt;/script&gt;
</code></pre>
<h2 id="36-ref-对比-reactive">3.6. 【ref 对比 reactive】</h2>
<p>宏观角度看：</p>
<blockquote>
<ol>
<li>
<p><code>ref</code>用来定义：<strong>基本类型数据</strong>、<strong>对象类型数据</strong>；</p>
</li>
<li>
<p><code>reactive</code>用来定义：<strong>对象类型数据</strong>。</p>
</li>
</ol>
</blockquote>
<ul>
<li>区别：</li>
</ul>
<blockquote>
<ol>
<li>
<p><code>ref</code>创建的变量必须使用<code>.value</code>（可以使用<code>volar</code>插件自动添加<code>.value</code>）。</p>
<img src="file:///c:\workspace\vue3+ts\资料\images\自动补充value.png" alt="自动补充value" style="zoom:50%;border-radius:20px" /> 
</li>
<li>
<p><code>reactive</code>重新分配一个新对象，会<strong>失去</strong>响应式（可以使用<code>Object.assign</code>去整体替换）。</p>
</li>
</ol>
</blockquote>
<ul>
<li>使用原则：</li>
</ul>
<blockquote>
<ol>
<li>若需要一个基本类型的响应式数据，必须使用<code>ref</code>。</li>
<li>若需要一个响应式对象，层级不深，<code>ref</code>、<code>reactive</code>都可以。</li>
<li>若需要一个响应式对象，且层级较深，推荐使用<code>reactive</code>。</li>
</ol>
</blockquote>
<h2 id="37-torefs-与-toref">3.7. 【toRefs 与 toRef】</h2>
<ul>
<li>作用：将一个响应式对象中的每一个属性，转换为<code>ref</code>对象。</li>
<li>备注：<code>toRefs</code>与<code>toRef</code>功能一致，但<code>toRefs</code>可以批量转换。</li>
<li>语法如下：</li>
</ul>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h2&gt;姓名：{{person.name}}&lt;/h2&gt;
    &lt;h2&gt;年龄：{{person.age}}&lt;/h2&gt;
    &lt;h2&gt;性别：{{person.gender}}&lt;/h2&gt;
    &lt;button @click=&quot;changeName&quot;&gt;修改名字&lt;/button&gt;
    &lt;button @click=&quot;changeAge&quot;&gt;修改年龄&lt;/button&gt;
    &lt;button @click=&quot;changeGender&quot;&gt;修改性别&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
  import {ref,reactive,toRefs,toRef} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
&lt;/script&gt;
</code></pre>
<h2 id="38-computed">3.8. 【computed】</h2>
<p>作用：根据已有数据计算出新数据（和<code>Vue2</code>中的<code>computed</code>作用一致）。</p>
<img src="file:///c:\workspace\vue3+ts\资料\images\computed.gif" style="zoom:20%;" />  
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    姓：&lt;input type=&quot;text&quot; v-model=&quot;firstName&quot;&gt; &lt;br&gt;
    名：&lt;input type=&quot;text&quot; v-model=&quot;lastName&quot;&gt; &lt;br&gt;
    全名：&lt;span&gt;{{fullName}}&lt;/span&gt; &lt;br&gt;
    &lt;button @click=&quot;changeFullName&quot;&gt;全名改为：li-si&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;App&quot;&gt;
  import {ref,computed} from 'vue'

  let firstName = ref('zhang')
  let lastName = ref('san')

  // 计算属性——只读取，不修改
  /* let fullName = computed(()=&gt;{
    return firstName.value + '-' + lastName.value
  }) */


  // 计算属性——既读取又修改
  let fullName = computed({
    // 读取
    get(){
      return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val){
      console.log('有人修改了fullName',val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })

  function changeFullName(){
    fullName.value = 'li-si'
  } 
&lt;/script&gt;
</code></pre>
<h2 id="39watch">3.9.【watch】</h2>
<ul>
<li>作用：监视数据的变化（和<code>Vue2</code>中的<code>watch</code>作用一致）</li>
<li>特点：<code>Vue3</code>中的<code>watch</code>只能监视以下<strong>四种数据</strong>：</li>
</ul>
<blockquote>
<ol>
<li><code>ref</code>定义的数据。</li>
<li><code>reactive</code>定义的数据。</li>
<li>函数返回一个值（<code>getter</code>函数）。</li>
<li>一个包含上述内容的数组。</li>
</ol>
</blockquote>
<p>我们在<code>Vue3</code>中使用<code>watch</code>的时候，通常会遇到以下几种情况：</p>
<h3 id="-情况一">* 情况一</h3>
<p>监视<code>ref</code>定义的【基本类型】数据：直接写数据名即可，监视的是其<code>value</code>值的改变。</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h1&gt;情况一：监视【ref】定义的【基本类型】数据&lt;/h1&gt;
    &lt;h2&gt;当前求和为：{{sum}}&lt;/h2&gt;
    &lt;button @click=&quot;changeSum&quot;&gt;点我sum+1&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
  import {ref,watch} from 'vue'
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value += 1
  }
  // 监视，情况一：监视【ref】定义的【基本类型】数据
  const stopWatch = watch(sum,(newValue,oldValue)=&gt;{
    console.log('sum变化了',newValue,oldValue)
    if(newValue &gt;= 10){
      stopWatch()
    }
  })
&lt;/script&gt;
</code></pre>
<h3 id="-情况二">* 情况二</h3>
<p>监视<code>ref</code>定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。</p>
<blockquote>
<p>注意：</p>
<ul>
<li>
<p>若修改的是<code>ref</code>定义的对象中的属性，<code>newValue</code> 和 <code>oldValue</code> 都是新值，因为它们是同一个对象。</p>
</li>
<li>
<p>若修改整个<code>ref</code>定义的对象，<code>newValue</code> 是新值， <code>oldValue</code> 是旧值，因为不是同一个对象了。</p>
</li>
</ul>
</blockquote>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h1&gt;情况二：监视【ref】定义的【对象类型】数据&lt;/h1&gt;
    &lt;h2&gt;姓名：{{ person.name }}&lt;/h2&gt;
    &lt;h2&gt;年龄：{{ person.age }}&lt;/h2&gt;
    &lt;button @click=&quot;changeName&quot;&gt;修改名字&lt;/button&gt;
    &lt;button @click=&quot;changeAge&quot;&gt;修改年龄&lt;/button&gt;
    &lt;button @click=&quot;changePerson&quot;&gt;修改整个人&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
  import {ref,watch} from 'vue'
  // 数据
  let person = ref({
    name:'张三',
    age:18
  })
  // 方法
  function changeName(){
    person.value.name += '~'
  }
  function changeAge(){
    person.value.age += 1
  }
  function changePerson(){
    person.value = {name:'李四',age:90}
  }
  /* 
    监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
    watch的第一个参数是：被监视的数据
    watch的第二个参数是：监视的回调
    watch的第三个参数是：配置对象（deep、immediate等等.....） 
  */
  watch(person,(newValue,oldValue)=&gt;{
    console.log('person变化了',newValue,oldValue)
  },{deep:true})
  
&lt;/script&gt;
</code></pre>
<h3 id="--情况三">*  情况三</h3>
<p>监视<code>reactive</code>定义的【对象类型】数据，且默认开启了深度监视。</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h1&gt;情况三：监视【reactive】定义的【对象类型】数据&lt;/h1&gt;
    &lt;h2&gt;姓名：{{ person.name }}&lt;/h2&gt;
    &lt;h2&gt;年龄：{{ person.age }}&lt;/h2&gt;
    &lt;button @click=&quot;changeName&quot;&gt;修改名字&lt;/button&gt;
    &lt;button @click=&quot;changeAge&quot;&gt;修改年龄&lt;/button&gt;
    &lt;button @click=&quot;changePerson&quot;&gt;修改整个人&lt;/button&gt;
    &lt;hr&gt;
    &lt;h2&gt;测试：{{obj.a.b.c}}&lt;/h2&gt;
    &lt;button @click=&quot;test&quot;&gt;修改obj.a.b.c&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
  import {reactive,watch} from 'vue'
  // 数据
  let person = reactive({
    name:'张三',
    age:18
  })
  let obj = reactive({
    a:{
      b:{
        c:666
      }
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changePerson(){
    Object.assign(person,{name:'李四',age:80})
  }
  function test(){
    obj.a.b.c = 888
  }

  // 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
  watch(person,(newValue,oldValue)=&gt;{
    console.log('person变化了',newValue,oldValue)
  })
  watch(obj,(newValue,oldValue)=&gt;{
    console.log('Obj变化了',newValue,oldValue)
  })
&lt;/script&gt;
</code></pre>
<h3 id="-情况四">* 情况四</h3>
<p>监视<code>ref</code>或<code>reactive</code>定义的【对象类型】数据中的<strong>某个属性</strong>，注意点如下：</p>
<ol>
<li>若该属性值<strong>不是</strong>【对象类型】，需要写成函数形式。</li>
<li>若该属性值是<strong>依然</strong>是【对象类型】，可直接编，也可写成函数，建议写成函数。</li>
</ol>
<p>结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h1&gt;情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性&lt;/h1&gt;
    &lt;h2&gt;姓名：{{ person.name }}&lt;/h2&gt;
    &lt;h2&gt;年龄：{{ person.age }}&lt;/h2&gt;
    &lt;h2&gt;汽车：{{ person.car.c1 }}、{{ person.car.c2 }}&lt;/h2&gt;
    &lt;button @click=&quot;changeName&quot;&gt;修改名字&lt;/button&gt;
    &lt;button @click=&quot;changeAge&quot;&gt;修改年龄&lt;/button&gt;
    &lt;button @click=&quot;changeC1&quot;&gt;修改第一台车&lt;/button&gt;
    &lt;button @click=&quot;changeC2&quot;&gt;修改第二台车&lt;/button&gt;
    &lt;button @click=&quot;changeCar&quot;&gt;修改整个车&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
  import {reactive,watch} from 'vue'

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  // 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
  /* watch(()=&gt; person.name,(newValue,oldValue)=&gt;{
    console.log('person.name变化了',newValue,oldValue)
  }) */

  // 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
  watch(()=&gt;person.car,(newValue,oldValue)=&gt;{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})
&lt;/script&gt;
</code></pre>
<h3 id="-情况五">* 情况五</h3>
<p>监视上述的多个数据</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h1&gt;情况五：监视上述的多个数据&lt;/h1&gt;
    &lt;h2&gt;姓名：{{ person.name }}&lt;/h2&gt;
    &lt;h2&gt;年龄：{{ person.age }}&lt;/h2&gt;
    &lt;h2&gt;汽车：{{ person.car.c1 }}、{{ person.car.c2 }}&lt;/h2&gt;
    &lt;button @click=&quot;changeName&quot;&gt;修改名字&lt;/button&gt;
    &lt;button @click=&quot;changeAge&quot;&gt;修改年龄&lt;/button&gt;
    &lt;button @click=&quot;changeC1&quot;&gt;修改第一台车&lt;/button&gt;
    &lt;button @click=&quot;changeC2&quot;&gt;修改第二台车&lt;/button&gt;
    &lt;button @click=&quot;changeCar&quot;&gt;修改整个车&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
  import {reactive,watch} from 'vue'

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  // 监视，情况五：监视上述的多个数据
  watch([()=&gt;person.name,person.car],(newValue,oldValue)=&gt;{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})

&lt;/script&gt;
</code></pre>
<h2 id="310-watcheffect">3.10. 【watchEffect】</h2>
<ul>
<li>
<p>官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。</p>
</li>
<li>
<p><code>watch</code>对比<code>watchEffect</code></p>
<blockquote>
<ol>
<li>
<p>都能监听响应式数据的变化，不同的是监听数据变化的方式不同</p>
</li>
<li>
<p><code>watch</code>：要明确指出监视的数据</p>
</li>
<li>
<p><code>watchEffect</code>：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。</p>
</li>
</ol>
</blockquote>
</li>
<li>
<p>示例代码：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h1&gt;需求：水温达到50℃，或水位达到20cm，则联系服务器&lt;/h1&gt;
    &lt;h2 id=&quot;demo&quot;&gt;水温：{{temp}}&lt;/h2&gt;
    &lt;h2&gt;水位：{{height}}&lt;/h2&gt;
    &lt;button @click=&quot;changePrice&quot;&gt;水温+1&lt;/button&gt;
    &lt;button @click=&quot;changeSum&quot;&gt;水位+10&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
  import {ref,watch,watchEffect} from 'vue'
  // 数据
  let temp = ref(0)
  let height = ref(0)

  // 方法
  function changePrice(){
    temp.value += 10
  }
  function changeSum(){
    height.value += 1
  }

  // 用watch实现，需要明确的指出要监视：temp、height
  watch([temp,height],(value)=&gt;{
    // 从value中获取最新的temp值、height值
    const [newTemp,newHeight] = value
    // 室温达到50℃，或水位达到20cm，立刻联系服务器
    if(newTemp &gt;= 50 || newHeight &gt;= 20){
      console.log('联系服务器')
    }
  })

  // 用watchEffect实现，不用
  const stopWtach = watchEffect(()=&gt;{
    // 室温达到50℃，或水位达到20cm，立刻联系服务器
    if(temp.value &gt;= 50 || height.value &gt;= 20){
      console.log(document.getElementById('demo')?.innerText)
      console.log('联系服务器')
    }
    // 水温达到100，或水位达到50，取消监视
    if(temp.value === 100 || height.value === 50){
      console.log('清理了')
      stopWtach()
    }
  })
&lt;/script&gt;
</code></pre>
</li>
</ul>
<h2 id="311-标签的-ref-属性">3.11. 【标签的 ref 属性】</h2>
<p>作用：用于注册模板引用。</p>
<blockquote>
<ul>
<li>
<p>用在普通<code>DOM</code>标签上，获取的是<code>DOM</code>节点。</p>
</li>
<li>
<p>用在组件标签上，获取的是组件实例对象。</p>
</li>
</ul>
</blockquote>
<p>用在普通<code>DOM</code>标签上：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h1 ref=&quot;title1&quot;&gt;尚硅谷&lt;/h1&gt;
    &lt;h2 ref=&quot;title2&quot;&gt;前端&lt;/h2&gt;
    &lt;h3 ref=&quot;title3&quot;&gt;Vue&lt;/h3&gt;
    &lt;input type=&quot;text&quot; ref=&quot;inpt&quot;&gt; &lt;br&gt;&lt;br&gt;
    &lt;button @click=&quot;showLog&quot;&gt;点我打印内容&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
  import {ref} from 'vue'
	
  let title1 = ref()
  let title2 = ref()
  let title3 = ref()

  function showLog(){
    // 通过id获取元素
    const t1 = document.getElementById('title1')
    // 打印内容
    console.log((t1 as HTMLElement).innerText)
    console.log((&lt;HTMLElement&gt;t1).innerText)
    console.log(t1?.innerText)
    
		/************************************/
		
    // 通过ref获取元素
    console.log(title1.value)
    console.log(title2.value)
    console.log(title3.value)
  }
&lt;/script&gt;
</code></pre>
<p>用在组件标签上：</p>
<pre><code class="language-vue">&lt;!-- 父组件App.vue --&gt;
&lt;template&gt;
  &lt;Person ref=&quot;ren&quot;/&gt;
  &lt;button @click=&quot;test&quot;&gt;测试&lt;/button&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;App&quot;&gt;
  import Person from './components/Person.vue'
  import {ref} from 'vue'

  let ren = ref()

  function test(){
    console.log(ren.value.name)
    console.log(ren.value.age)
  }
&lt;/script&gt;


&lt;!-- 子组件Person.vue中要使用defineExpose暴露内容 --&gt;
&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
  import {ref,defineExpose} from 'vue'
	// 数据
  let name = ref('张三')
  let age = ref(18)
  /****************************/
  /****************************/
  // 使用defineExpose将组件中的数据交给外部
  defineExpose({name,age})
&lt;/script&gt;
</code></pre>
<h2 id="312-props">3.12. 【props】</h2>
<blockquote>
<pre><code class="language-js"><span class="hljs-comment">// 定义一个接口，限制每个Person对象的格式</span>
<span class="hljs-keyword">export</span> interface <span class="hljs-title class_">PersonInter</span> {
 <span class="hljs-attr">id</span>:string,
 <span class="hljs-attr">name</span>:string,
    <span class="hljs-attr">age</span>:number
   }
   
<span class="hljs-comment">// 定义一个自定义类型Persons</span>
<span class="hljs-keyword">export</span> type <span class="hljs-title class_">Persons</span> = <span class="hljs-title class_">Array</span>&lt;<span class="hljs-title class_">PersonInter</span>&gt;
</code></pre>
<p><code>App.vue</code>中代码：</p>
<pre><code class="language-vue">&lt;template&gt;
	&lt;Person :list=&quot;persons&quot;/&gt;
&lt;/template&gt;
  
&lt;script lang=&quot;ts&quot; setup name=&quot;App&quot;&gt;
  import Person from './components/Person.vue'
  import {reactive} from 'vue'
    import {type Persons} from './types'
  
    let persons = reactive&lt;Persons&gt;([
     {id:'e98219e12',name:'张三',age:18},
      {id:'e98219e13',name:'李四',age:19},
       {id:'e98219e14',name:'王五',age:20}
     ])
   &lt;/script&gt;
  
</code></pre>
<p><code>Person.vue</code>中代码：</p>
<pre><code class="language-Vue">&lt;template&gt;
&lt;div class=&quot;person&quot;&gt;
 &lt;ul&gt;
     &lt;li v-for=&quot;item in list&quot; :key=&quot;item.id&quot;&gt;
        {{item.name}}--{{item.age}}
      &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
   &lt;/template&gt;
  
&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
import {defineProps} from 'vue'
import {type PersonInter} from '@/types'
  
  // 第一种写法：仅接收
// const props = defineProps(['list'])
  
  // 第二种写法：接收+限制类型
// defineProps&lt;{list:Persons}&gt;()
  
  // 第三种写法：接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps&lt;{list?:Persons}&gt;(),{
     list:()=&gt;[{id:'asdasg01',name:'小猪佩奇',age:18}]
  })
   console.log(props)
  &lt;/script&gt;
</code></pre>
</blockquote>
<h2 id="313-生命周期">3.13. 【生命周期】</h2>
<ul>
<li>
<p>概念：<code>Vue</code>组件实例在创建时要经历一系列的初始化步骤，在此过程中<code>Vue</code>会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子</p>
</li>
<li>
<p>规律：</p>
<blockquote>
<p>生命周期整体分为四个阶段，分别是：<strong>创建、挂载、更新、销毁</strong>，每个阶段都有两个钩子，一前一后。</p>
</blockquote>
</li>
<li>
<p><code>Vue2</code>的生命周期</p>
<blockquote>
<p>创建阶段：<code>beforeCreate</code>、<code>created</code></p>
<p>挂载阶段：<code>beforeMount</code>、<code>mounted</code></p>
<p>更新阶段：<code>beforeUpdate</code>、<code>updated</code></p>
<p>销毁阶段：<code>beforeDestroy</code>、<code>destroyed</code></p>
</blockquote>
</li>
<li>
<p><code>Vue3</code>的生命周期</p>
<blockquote>
<p>创建阶段：<code>setup</code></p>
<p>挂载阶段：<code>onBeforeMount</code>、<code>onMounted</code></p>
<p>更新阶段：<code>onBeforeUpdate</code>、<code>onUpdated</code></p>
<p>卸载阶段：<code>onBeforeUnmount</code>、<code>onUnmounted</code></p>
</blockquote>
</li>
<li>
<p>常用的钩子：<code>onMounted</code>(挂载完毕)、<code>onUpdated</code>(更新完毕)、<code>onBeforeUnmount</code>(卸载之前)</p>
</li>
<li>
<p>示例代码：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;person&quot;&gt;
    &lt;h2&gt;当前求和为：{{ sum }}&lt;/h2&gt;
    &lt;button @click=&quot;changeSum&quot;&gt;点我sum+1&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;!-- vue3写法 --&gt;
&lt;script lang=&quot;ts&quot; setup name=&quot;Person&quot;&gt;
  import { 
    ref, 
    onBeforeMount, 
    onMounted, 
    onBeforeUpdate, 
    onUpdated, 
    onBeforeUnmount, 
    onUnmounted 
  } from 'vue'

  // 数据
  let sum = ref(0)
  // 方法
  function changeSum() {
    sum.value += 1
  }
  console.log('setup')
  // 生命周期钩子
  onBeforeMount(()=&gt;{
    console.log('挂载之前')
  })
  onMounted(()=&gt;{
    console.log('挂载完毕')
  })
  onBeforeUpdate(()=&gt;{
    console.log('更新之前')
  })
  onUpdated(()=&gt;{
    console.log('更新完毕')
  })
  onBeforeUnmount(()=&gt;{
    console.log('卸载之前')
  })
  onUnmounted(()=&gt;{
    console.log('卸载完毕')
  })
&lt;/script&gt;
</code></pre>
</li>
</ul>
<h2 id="314-自定义hook">3.14. 【自定义hook】</h2>
<ul>
<li>
<p>什么是<code>hook</code>？—— 本质是一个函数，把<code>setup</code>函数中使用的<code>Composition API</code>进行了封装，类似于<code>vue2.x</code>中的<code>mixin</code>。</p>
</li>
<li>
<p>自定义<code>hook</code>的优势：复用代码, 让<code>setup</code>中的逻辑更清楚易懂。</p>
</li>
</ul>
<p>示例代码：</p>
<ul>
<li>
<p><code>useSum.ts</code>中内容如下：</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> {ref,onMounted} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){
  <span class="hljs-keyword">let</span> sum = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>)

  <span class="hljs-keyword">const</span> <span class="hljs-title function_">increment</span> = (<span class="hljs-params"></span>)=&gt;{
    sum.<span class="hljs-property">value</span> += <span class="hljs-number">1</span>
  }
  <span class="hljs-keyword">const</span> <span class="hljs-title function_">decrement</span> = (<span class="hljs-params"></span>)=&gt;{
    sum.<span class="hljs-property">value</span> -= <span class="hljs-number">1</span>
  }
  <span class="hljs-title function_">onMounted</span>(<span class="hljs-function">()=&gt;</span>{
    <span class="hljs-title function_">increment</span>()
  })

  <span class="hljs-comment">//向外部暴露数据</span>
  <span class="hljs-keyword">return</span> {sum,increment,decrement}
}		
</code></pre>
</li>
<li>
<p><code>useDog.ts</code>中内容如下：</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> {reactive,onMounted} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>
<span class="hljs-keyword">import</span> axios,{<span class="hljs-title class_">AxiosError</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;axios&#x27;</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){
  <span class="hljs-keyword">let</span> dogList = reactive&lt;string[]&gt;([])

  <span class="hljs-comment">// 方法</span>
  <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">getDog</span>(<span class="hljs-params"></span>){
    <span class="hljs-keyword">try</span> {
      <span class="hljs-comment">// 发请求</span>
      <span class="hljs-keyword">let</span> {data} = <span class="hljs-keyword">await</span> axios.<span class="hljs-title function_">get</span>(<span class="hljs-string">&#x27;https://dog.ceo/api/breed/pembroke/images/random&#x27;</span>)
      <span class="hljs-comment">// 维护数据</span>
      dogList.<span class="hljs-title function_">push</span>(data.<span class="hljs-property">message</span>)
    } <span class="hljs-keyword">catch</span> (error) {
      <span class="hljs-comment">// 处理错误</span>
      <span class="hljs-keyword">const</span> err = &lt;<span class="hljs-title class_">AxiosError</span>&gt;error
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err.<span class="hljs-property">message</span>)
    }
  }

  <span class="hljs-comment">// 挂载钩子</span>
  <span class="hljs-title function_">onMounted</span>(<span class="hljs-function">()=&gt;</span>{
    <span class="hljs-title function_">getDog</span>()
  })
	
  <span class="hljs-comment">//向外部暴露数据</span>
  <span class="hljs-keyword">return</span> {dogList,getDog}
}
</code></pre>
</li>
<li>
<p>组件中具体使用：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;h2&gt;当前求和为：{{sum}}&lt;/h2&gt;
  &lt;button @click=&quot;increment&quot;&gt;点我+1&lt;/button&gt;
  &lt;button @click=&quot;decrement&quot;&gt;点我-1&lt;/button&gt;
  &lt;hr&gt;
  &lt;img v-for=&quot;(u,index) in dogList.urlList&quot; :key=&quot;index&quot; :src=&quot;(u as string)&quot;&gt; 
  &lt;span v-show=&quot;dogList.isLoading&quot;&gt;加载中......&lt;/span&gt;&lt;br&gt;
  &lt;button @click=&quot;getDog&quot;&gt;再来一只狗&lt;/button&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot;&gt;
  import {defineComponent} from 'vue'

  export default defineComponent({
    name:'App',
  })
&lt;/script&gt;

&lt;script setup lang=&quot;ts&quot;&gt;
  import useSum from './hooks/useSum'
  import useDog from './hooks/useDog'
	
  let {sum,increment,decrement} = useSum()
  let {dogList,getDog} = useDog()
&lt;/script&gt;
</code></pre>
</li>
</ul>
<hr>
<h1 id="4-路由">4. 路由</h1>
<h2 id="41-对路由的理解">4.1. 【对路由的理解】</h2>
<img src="file:///c:\workspace\vue3+ts\资料\images\image-20231018144351536.png" alt="image-20231018144351536" style="zoom:20%;border-radius:40px" /> 
<h2 id="42-基本切换效果">4.2. 【基本切换效果】</h2>
<ul>
<li>
<p><code>Vue3</code>中要使用<code>vue-router</code>的最新版本，目前是<code>4</code>版本。</p>
</li>
<li>
<p>路由配置文件代码如下：</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> {createRouter,createWebHistory} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue-router&#x27;</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/pages/Home.vue&#x27;</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">News</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/pages/News.vue&#x27;</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">About</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/pages/About.vue&#x27;</span>

<span class="hljs-keyword">const</span> router = <span class="hljs-title function_">createRouter</span>({
	<span class="hljs-attr">history</span>:<span class="hljs-title function_">createWebHistory</span>(),
	<span class="hljs-attr">routes</span>:[
		{
			<span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/home&#x27;</span>,
			<span class="hljs-attr">component</span>:<span class="hljs-title class_">Home</span>
		},
		{
			<span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/about&#x27;</span>,
			<span class="hljs-attr">component</span>:<span class="hljs-title class_">About</span>
		}
	]
})
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> router
</code></pre>
</li>
</ul>
<ul>
<li>
<p><code>main.ts</code>代码如下：</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./router/index&#x27;</span>
app.<span class="hljs-title function_">use</span>(router)

app.<span class="hljs-title function_">mount</span>(<span class="hljs-string">&#x27;#app&#x27;</span>)
</code></pre>
</li>
</ul>
<ul>
<li>
<p><code>App.vue</code>代码如下</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;app&quot;&gt;
    &lt;h2 class=&quot;title&quot;&gt;Vue路由测试&lt;/h2&gt;
    &lt;!-- 导航区 --&gt;
    &lt;div class=&quot;navigate&quot;&gt;
      &lt;RouterLink to=&quot;/home&quot; active-class=&quot;active&quot;&gt;首页&lt;/RouterLink&gt;
      &lt;RouterLink to=&quot;/news&quot; active-class=&quot;active&quot;&gt;新闻&lt;/RouterLink&gt;
      &lt;RouterLink to=&quot;/about&quot; active-class=&quot;active&quot;&gt;关于&lt;/RouterLink&gt;
    &lt;/div&gt;
    &lt;!-- 展示区 --&gt;
    &lt;div class=&quot;main-content&quot;&gt;
      &lt;RouterView&gt;&lt;/RouterView&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot; setup name=&quot;App&quot;&gt;
  import {RouterLink,RouterView} from 'vue-router'  
&lt;/script&gt;
</code></pre>
</li>
</ul>
<h2 id="43-两个注意点">4.3. 【两个注意点】</h2>
<blockquote>
<ol>
<li>
<p>路由组件通常存放在<code>pages</code> 或 <code>views</code>文件夹，一般组件通常存放在<code>components</code>文件夹。</p>
</li>
<li>
<p>通过点击导航，视觉效果上“消失” 了的路由组件，默认是被<strong>卸载</strong>掉的，需要的时候再去<strong>挂载</strong>。</p>
</li>
</ol>
</blockquote>
<h2 id="44路由器工作模式">4.4.【路由器工作模式】</h2>
<ol>
<li>
<p><code>history</code>模式</p>
<blockquote>
<p>优点：<code>URL</code>更加美观，不带有<code>#</code>，更接近传统的网站<code>URL</code>。</p>
<p>缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有<code>404</code>错误。</p>
<pre><code class="language-js"><span class="hljs-keyword">const</span> router = <span class="hljs-title function_">createRouter</span>({
  	<span class="hljs-attr">history</span>:<span class="hljs-title function_">createWebHistory</span>(), <span class="hljs-comment">//history模式</span>
  	<span class="hljs-comment">/******/</span>
})
</code></pre>
</blockquote>
</li>
<li>
<p><code>hash</code>模式</p>
<blockquote>
<p>优点：兼容性更好，因为不需要服务器端处理路径。</p>
<p>缺点：<code>URL</code>带有<code>#</code>不太美观，且在<code>SEO</code>优化方面相对较差。</p>
<pre><code class="language-js"><span class="hljs-keyword">const</span> router = <span class="hljs-title function_">createRouter</span>({
  	<span class="hljs-attr">history</span>:<span class="hljs-title function_">createWebHashHistory</span>(), <span class="hljs-comment">//hash模式</span>
  	<span class="hljs-comment">/******/</span>
})
</code></pre>
</blockquote>
</li>
</ol>
<h2 id="45-to的两种写法">4.5. 【to的两种写法】</h2>
<pre><code class="language-vue">&lt;!-- 第一种：to的字符串写法 --&gt;
&lt;router-link active-class=&quot;active&quot; to=&quot;/home&quot;&gt;主页&lt;/router-link&gt;

&lt;!-- 第二种：to的对象写法 --&gt;
&lt;router-link active-class=&quot;active&quot; :to=&quot;{path:'/home'}&quot;&gt;Home&lt;/router-link&gt;
</code></pre>
<h2 id="46-命名路由">4.6. 【命名路由】</h2>
<p>作用：可以简化路由跳转及传参（后面就讲）。</p>
<p>给路由规则命名：</p>
<pre><code class="language-js"><span class="hljs-attr">routes</span>:[
  {
    <span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;zhuye&#x27;</span>,
    <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/home&#x27;</span>,
    <span class="hljs-attr">component</span>:<span class="hljs-title class_">Home</span>
  },
  {
    <span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;xinwen&#x27;</span>,
    <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/news&#x27;</span>,
    <span class="hljs-attr">component</span>:<span class="hljs-title class_">News</span>,
  },
  {
    <span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;guanyu&#x27;</span>,
    <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/about&#x27;</span>,
    <span class="hljs-attr">component</span>:<span class="hljs-title class_">About</span>
  }
]
</code></pre>
<p>跳转路由：</p>
<pre><code class="language-vue">&lt;!--简化前：需要写完整的路径（to的字符串写法） --&gt;
&lt;router-link to=&quot;/news/detail&quot;&gt;跳转&lt;/router-link&gt;

&lt;!--简化后：直接通过名字跳转（to的对象写法配合name属性） --&gt;
&lt;router-link :to=&quot;{name:'guanyu'}&quot;&gt;跳转&lt;/router-link&gt;
</code></pre>
<h2 id="47-嵌套路由">4.7. 【嵌套路由】</h2>
<ol>
<li>
<p>编写<code>News</code>的子路由：<code>Detail.vue</code></p>
</li>
<li>
<p>配置路由规则，使用<code>children</code>配置项：</p>
<pre><code class="language-ts"><span class="hljs-keyword">const</span> router = <span class="hljs-title function_">createRouter</span>({
  <span class="hljs-attr">history</span>:<span class="hljs-title function_">createWebHistory</span>(),
	<span class="hljs-attr">routes</span>:[
		{
			<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;zhuye&#x27;</span>,
			<span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/home&#x27;</span>,
			<span class="hljs-attr">component</span>:<span class="hljs-title class_">Home</span>
		},
		{
			<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;xinwen&#x27;</span>,
			<span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/news&#x27;</span>,
			<span class="hljs-attr">component</span>:<span class="hljs-title class_">News</span>,
			<span class="hljs-attr">children</span>:[
				{
					<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;xiang&#x27;</span>,
					<span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;detail&#x27;</span>,
					<span class="hljs-attr">component</span>:<span class="hljs-title class_">Detail</span>
				}
			]
		},
		{
			<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;guanyu&#x27;</span>,
			<span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/about&#x27;</span>,
			<span class="hljs-attr">component</span>:<span class="hljs-title class_">About</span>
		}
	]
})
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> router
</code></pre>
</li>
<li>
<p>跳转路由（记得要加完整路径）：</p>
<pre><code class="language-vue">&lt;router-link to=&quot;/news/detail&quot;&gt;xxxx&lt;/router-link&gt;
&lt;!-- 或 --&gt;
&lt;router-link :to=&quot;{path:'/news/detail'}&quot;&gt;xxxx&lt;/router-link&gt;
</code></pre>
</li>
<li>
<p>记得去<code>Home</code>组件中预留一个<code>&lt;router-view&gt;</code></p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;news&quot;&gt;
    &lt;nav class=&quot;news-list&quot;&gt;
      &lt;RouterLink v-for=&quot;news in newsList&quot; :key=&quot;news.id&quot; :to=&quot;{path:'/news/detail'}&quot;&gt;
        {{news.name}}
      &lt;/RouterLink&gt;
    &lt;/nav&gt;
    &lt;div class=&quot;news-detail&quot;&gt;
      &lt;RouterView/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre>
</li>
</ol>
<h2 id="48-路由传参">4.8. 【路由传参】</h2>
<h3 id="query参数">query参数</h3>
<ol>
<li>
<p>传递参数</p>
<pre><code class="language-vue">&lt;!-- 跳转并携带query参数（to的字符串写法） --&gt;
&lt;router-link to=&quot;/news/detail?a=1&amp;b=2&amp;content=欢迎你&quot;&gt;
	跳转
&lt;/router-link&gt;
				
&lt;!-- 跳转并携带query参数（to的对象写法） --&gt;
&lt;RouterLink 
  :to=&quot;{
    //name:'xiang', //用name也可以跳转
    path:'/news/detail',
    query:{
      id:news.id,
      title:news.title,
      content:news.content
    }
  }&quot;
&gt;
  {{news.title}}
&lt;/RouterLink&gt;
</code></pre>
</li>
<li>
<p>接收参数：</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> {useRoute} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue-router&#x27;</span>
<span class="hljs-keyword">const</span> route = <span class="hljs-title function_">useRoute</span>()
<span class="hljs-comment">// 打印query参数</span>
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(route.<span class="hljs-property">query</span>)
</code></pre>
</li>
</ol>
<h3 id="params参数">params参数</h3>
<ol>
<li>
<p>传递参数</p>
<pre><code class="language-vue">&lt;!-- 跳转并携带params参数（to的字符串写法） --&gt;
&lt;RouterLink :to=&quot;`/news/detail/001/新闻001/内容001`&quot;&gt;{{news.title}}&lt;/RouterLink&gt;
				
&lt;!-- 跳转并携带params参数（to的对象写法） --&gt;
&lt;RouterLink 
  :to=&quot;{
    name:'xiang', //用name跳转
    params:{
      id:news.id,
      title:news.title,
      content:news.title
    }
  }&quot;
&gt;
  {{news.title}}
&lt;/RouterLink&gt;
</code></pre>
</li>
<li>
<p>接收参数：</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> {useRoute} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue-router&#x27;</span>
<span class="hljs-keyword">const</span> route = <span class="hljs-title function_">useRoute</span>()
<span class="hljs-comment">// 打印params参数</span>
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(route.<span class="hljs-property">params</span>)
</code></pre>
</li>
</ol>
<blockquote>
<p>备注1：传递<code>params</code>参数时，若使用<code>to</code>的对象写法，必须使用<code>name</code>配置项，不能用<code>path</code>。</p>
<p>备注2：传递<code>params</code>参数时，需要提前在规则中占位。</p>
</blockquote>
<h2 id="49-路由的props配置">4.9. 【路由的props配置】</h2>
<p>作用：让路由组件更方便的收到参数（可以将路由参数作为<code>props</code>传给组件）</p>
<pre><code class="language-js">{
	<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;xiang&#x27;</span>,
	<span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;detail/:id/:title/:content&#x27;</span>,
	<span class="hljs-attr">component</span>:<span class="hljs-title class_">Detail</span>,

  <span class="hljs-comment">// props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件</span>
  <span class="hljs-comment">// props:{a:1,b:2,c:3}, </span>

  <span class="hljs-comment">// props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件</span>
  <span class="hljs-comment">// props:true</span>
  
  <span class="hljs-comment">// props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件</span>
  <span class="hljs-title function_">props</span>(<span class="hljs-params">route</span>){
    <span class="hljs-keyword">return</span> route.<span class="hljs-property">query</span>
  }
}
</code></pre>
<h2 id="410--replace属性">4.10. 【 replace属性】</h2>
<ol>
<li>
<p>作用：控制路由跳转时操作浏览器历史记录的模式。</p>
</li>
<li>
<p>浏览器的历史记录有两种写入方式：分别为<code>push</code>和<code>replace</code>：</p>
<ul>
<li><code>push</code>是追加历史记录（默认值）。</li>
<li><code>replace</code>是替换当前记录。</li>
</ul>
</li>
<li>
<p>开启<code>replace</code>模式：</p>
<pre><code class="language-vue">&lt;RouterLink replace .......&gt;News&lt;/RouterLink&gt;
</code></pre>
</li>
</ol>
<h2 id="411-编程式导航">4.11. 【编程式导航】</h2>
<p>路由组件的两个重要的属性：<code>$route</code>和<code>$router</code>变成了两个<code>hooks</code></p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> {useRoute,useRouter} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue-router&#x27;</span>

<span class="hljs-keyword">const</span> route = <span class="hljs-title function_">useRoute</span>()
<span class="hljs-keyword">const</span> router = <span class="hljs-title function_">useRouter</span>()

<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(route.<span class="hljs-property">query</span>)
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(route.<span class="hljs-property">parmas</span>)
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(router.<span class="hljs-property">push</span>)
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(router.<span class="hljs-property">replace</span>)
</code></pre>
<h2 id="412-重定向">4.12. 【重定向】</h2>
<ol>
<li>
<p>作用：将特定的路径，重新定向到已有路由。</p>
</li>
<li>
<p>具体编码：</p>
<pre><code class="language-js">{
    <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/&#x27;</span>,
    <span class="hljs-attr">redirect</span>:<span class="hljs-string">&#x27;/about&#x27;</span>
}
</code></pre>
</li>
</ol>
<h1 id="5-pinia">5. pinia</h1>
<h2 id="51准备一个效果">5.1【准备一个效果】</h2>
<img src="file:///c:\workspace\vue3+ts\资料\images\pinia_example.gif" alt="pinia_example" style="zoom:30%;border:3px solid" /> 
<h2 id="52搭建-pinia-环境">5.2【搭建 pinia 环境】</h2>
<p>第一步：<code>npm install pinia</code></p>
<p>第二步：操作<code>src/main.ts</code></p>
<pre><code class="language-ts"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./App.vue&#x27;</span>

<span class="hljs-comment">/* 引入createPinia，用于创建pinia */</span>
<span class="hljs-keyword">import</span> { createPinia } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;pinia&#x27;</span>

<span class="hljs-comment">/* 创建pinia */</span>
<span class="hljs-keyword">const</span> pinia = <span class="hljs-title function_">createPinia</span>()
<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>(<span class="hljs-title class_">App</span>)

<span class="hljs-comment">/* 使用插件 */</span>{}
app.<span class="hljs-title function_">use</span>(pinia)
app.<span class="hljs-title function_">mount</span>(<span class="hljs-string">&#x27;#app&#x27;</span>)
</code></pre>
<p>此时开发者工具中已经有了<code>pinia</code>选项</p>
<img src="https://cdn.nlark.com/yuque/0/2023/png/35780599/1684309952481-c67f67f9-d1a3-4d69-8bd6-2b381e003f31.png" style="zoom:80%;border:1px solid black;border-radius:10px" />
<h2 id="53存储读取数据">5.3【存储+读取数据】</h2>
<ol>
<li>
<p><code>Store</code>是一个保存：<strong>状态</strong>、<strong>业务逻辑</strong> 的实体，每个组件都可以<strong>读取</strong>、<strong>写入</strong>它。</p>
</li>
<li>
<p>它有三个概念：<code>state</code>、<code>getter</code>、<code>action</code>，相当于组件中的： <code>data</code>、 <code>computed</code> 和 <code>methods</code>。</p>
</li>
<li>
<p>具体编码：<code>src/store/count.ts</code></p>
<pre><code class="language-ts"><span class="hljs-comment">// 引入defineStore用于创建store</span>
<span class="hljs-keyword">import</span> {defineStore} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;pinia&#x27;</span>

<span class="hljs-comment">// 定义并暴露一个store</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> useCountStore = <span class="hljs-title function_">defineStore</span>(<span class="hljs-string">&#x27;count&#x27;</span>,{
  <span class="hljs-comment">// 动作</span>
  <span class="hljs-attr">actions</span>:{},
  <span class="hljs-comment">// 状态</span>
  <span class="hljs-title function_">state</span>(<span class="hljs-params"></span>){
    <span class="hljs-keyword">return</span> {
      <span class="hljs-attr">sum</span>:<span class="hljs-number">6</span>
    }
  },
  <span class="hljs-comment">// 计算</span>
  <span class="hljs-attr">getters</span>:{}
})
</code></pre>
</li>
<li>
<p>具体编码：<code>src/store/talk.ts</code></p>
<pre><code class="language-js"><span class="hljs-comment">// 引入defineStore用于创建store</span>
<span class="hljs-keyword">import</span> {defineStore} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;pinia&#x27;</span>

<span class="hljs-comment">// 定义并暴露一个store</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> useTalkStore = <span class="hljs-title function_">defineStore</span>(<span class="hljs-string">&#x27;talk&#x27;</span>,{
  <span class="hljs-comment">// 动作</span>
  <span class="hljs-attr">actions</span>:{},
  <span class="hljs-comment">// 状态</span>
  <span class="hljs-title function_">state</span>(<span class="hljs-params"></span>){
    <span class="hljs-keyword">return</span> {
      <span class="hljs-attr">talkList</span>:[
        {<span class="hljs-attr">id</span>:<span class="hljs-string">&#x27;yuysada01&#x27;</span>,<span class="hljs-attr">content</span>:<span class="hljs-string">&#x27;你今天有点怪，哪里怪？怪好看的！&#x27;</span>},
     		{<span class="hljs-attr">id</span>:<span class="hljs-string">&#x27;yuysada02&#x27;</span>,<span class="hljs-attr">content</span>:<span class="hljs-string">&#x27;草莓、蓝莓、蔓越莓，你想我了没？&#x27;</span>},
        {<span class="hljs-attr">id</span>:<span class="hljs-string">&#x27;yuysada03&#x27;</span>,<span class="hljs-attr">content</span>:<span class="hljs-string">&#x27;心里给你留了一块地，我的死心塌地&#x27;</span>}
      ]
    }
  },
  <span class="hljs-comment">// 计算</span>
  <span class="hljs-attr">getters</span>:{}
})
</code></pre>
</li>
<li>
<p>组件中使用<code>state</code>中的数据</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;h2&gt;当前求和为：{{ sumStore.sum }}&lt;/h2&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;Count&quot;&gt;
  // 引入对应的useXxxxxStore	
  import {useSumStore} from '@/store/sum'
  
  // 调用useXxxxxStore得到对应的store
  const sumStore = useSumStore()
&lt;/script&gt;
</code></pre>
<pre><code class="language-vue">&lt;template&gt;
	&lt;ul&gt;
    &lt;li v-for=&quot;talk in talkStore.talkList&quot; :key=&quot;talk.id&quot;&gt;
      {{ talk.content }}
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;Count&quot;&gt;
  import axios from 'axios'
  import {useTalkStore} from '@/store/talk'

  const talkStore = useTalkStore()
&lt;/script&gt;
</code></pre>
</li>
</ol>
<h2 id="54修改数据三种方式">5.4.【修改数据】(三种方式)</h2>
<ol>
<li>
<p>第一种修改方式，直接修改</p>
<pre><code class="language-ts">countStore.<span class="hljs-property">sum</span> = <span class="hljs-number">666</span>
</code></pre>
</li>
<li>
<p>第二种修改方式：批量修改</p>
<pre><code class="language-ts">countStore.$patch({
  <span class="hljs-attr">sum</span>:<span class="hljs-number">999</span>,
  <span class="hljs-attr">school</span>:<span class="hljs-string">&#x27;atguigu&#x27;</span>
})
</code></pre>
</li>
<li>
<p>第三种修改方式：借助<code>action</code>修改（<code>action</code>中可以编写一些业务逻辑）</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> { defineStore } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;pinia&#x27;</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> useCountStore = <span class="hljs-title function_">defineStore</span>(<span class="hljs-string">&#x27;count&#x27;</span>, {
  <span class="hljs-comment">/*************/</span>
  <span class="hljs-attr">actions</span>: {
    <span class="hljs-comment">//加</span>
    <span class="hljs-title function_">increment</span>(<span class="hljs-params">value:number</span>) {
      <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">sum</span> &lt; <span class="hljs-number">10</span>) {
        <span class="hljs-comment">//操作countStore中的sum</span>
        <span class="hljs-variable language_">this</span>.<span class="hljs-property">sum</span> += value
      }
    },
    <span class="hljs-comment">//减</span>
    <span class="hljs-title function_">decrement</span>(<span class="hljs-params">value:number</span>){
      <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">sum</span> &gt; <span class="hljs-number">1</span>){
        <span class="hljs-variable language_">this</span>.<span class="hljs-property">sum</span> -= value
      }
    }
  },
  <span class="hljs-comment">/*************/</span>
})
</code></pre>
</li>
<li>
<p>组件中调用<code>action</code>即可</p>
<pre><code class="language-js"><span class="hljs-comment">// 使用countStore</span>
<span class="hljs-keyword">const</span> countStore = <span class="hljs-title function_">useCountStore</span>()

<span class="hljs-comment">// 调用对应action</span>
countStore.<span class="hljs-title function_">incrementOdd</span>(n.<span class="hljs-property">value</span>)
</code></pre>
</li>
</ol>
<h2 id="55storetorefs">5.5.【storeToRefs】</h2>
<ul>
<li>借助<code>storeToRefs</code>将<code>store</code>中的数据转为<code>ref</code>对象，方便在模板中使用。</li>
<li>注意：<code>pinia</code>提供的<code>storeToRefs</code>只会将数据做转换，而<code>Vue</code>的<code>toRefs</code>会转换<code>store</code>中数据。</li>
</ul>
<pre><code class="language-vue">&lt;template&gt;
	&lt;div class=&quot;count&quot;&gt;
		&lt;h2&gt;当前求和为：{{sum}}&lt;/h2&gt;
	&lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;Count&quot;&gt;
  import { useCountStore } from '@/store/count'
  /* 引入storeToRefs */
  import { storeToRefs } from 'pinia'

	/* 得到countStore */
  const countStore = useCountStore()
  /* 使用storeToRefs转换countStore，随后解构 */
  const {sum} = storeToRefs(countStore)
&lt;/script&gt;

</code></pre>
<h2 id="56getters">5.6.【getters】</h2>
<ol>
<li>
<p>概念：当<code>state</code>中的数据，需要经过处理后再使用时，可以使用<code>getters</code>配置。</p>
</li>
<li>
<p>追加<code>getters</code>配置。</p>
<pre><code class="language-js"><span class="hljs-comment">// 引入defineStore用于创建store</span>
<span class="hljs-keyword">import</span> {defineStore} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;pinia&#x27;</span>

<span class="hljs-comment">// 定义并暴露一个store</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> useCountStore = <span class="hljs-title function_">defineStore</span>(<span class="hljs-string">&#x27;count&#x27;</span>,{
  <span class="hljs-comment">// 动作</span>
  <span class="hljs-attr">actions</span>:{
    <span class="hljs-comment">/************/</span>
  },
  <span class="hljs-comment">// 状态</span>
  <span class="hljs-title function_">state</span>(<span class="hljs-params"></span>){
    <span class="hljs-keyword">return</span> {
      <span class="hljs-attr">sum</span>:<span class="hljs-number">1</span>,
      <span class="hljs-attr">school</span>:<span class="hljs-string">&#x27;atguigu&#x27;</span>
    }
  },
  <span class="hljs-comment">// 计算</span>
  <span class="hljs-attr">getters</span>:{
    <span class="hljs-attr">bigSum</span>:(state):<span class="hljs-function"><span class="hljs-params">number</span> =&gt;</span> state.<span class="hljs-property">sum</span> *<span class="hljs-number">10</span>,
    <span class="hljs-title function_">upperSchool</span>():string{
      <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>. school.<span class="hljs-title function_">toUpperCase</span>()
    }
  }
})
</code></pre>
</li>
<li>
<p>组件中读取数据：</p>
<pre><code class="language-js"><span class="hljs-keyword">const</span> {increment,decrement} = countStore
<span class="hljs-keyword">let</span> {sum,school,bigSum,upperSchool} = <span class="hljs-title function_">storeToRefs</span>(countStore)
</code></pre>
</li>
</ol>
<h2 id="57subscribe">5.7.【$subscribe】</h2>
<p>通过 store 的 <code>$subscribe()</code> 方法侦听 <code>state</code> 及其变化</p>
<pre><code class="language-ts">talkStore.$subscribe(<span class="hljs-function">(<span class="hljs-params">mutate,state</span>)=&gt;</span>{
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;LoveTalk&#x27;</span>,mutate,state)
  <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">setItem</span>(<span class="hljs-string">&#x27;talk&#x27;</span>,<span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(talkList.<span class="hljs-property">value</span>))
})
</code></pre>
<h2 id="58-store组合式写法">5.8. 【store组合式写法】</h2>
<pre><code class="language-ts"><span class="hljs-keyword">import</span> {defineStore} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;pinia&#x27;</span>
<span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;axios&#x27;</span>
<span class="hljs-keyword">import</span> {nanoid} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;nanoid&#x27;</span>
<span class="hljs-keyword">import</span> {reactive} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> useTalkStore = <span class="hljs-title function_">defineStore</span>(<span class="hljs-string">&#x27;talk&#x27;</span>,<span class="hljs-function">()=&gt;</span>{
  <span class="hljs-comment">// talkList就是state</span>
  <span class="hljs-keyword">const</span> talkList = <span class="hljs-title function_">reactive</span>(
    <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(<span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">getItem</span>(<span class="hljs-string">&#x27;talkList&#x27;</span>) <span class="hljs-keyword">as</span> <span class="hljs-built_in">string</span>) || []
  )

  <span class="hljs-comment">// getATalk函数相当于action</span>
  <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">getATalk</span>(<span class="hljs-params"></span>){
    <span class="hljs-comment">// 发请求，下面这行的写法是：连续解构赋值+重命名</span>
    <span class="hljs-keyword">let</span> {<span class="hljs-attr">data</span>:{<span class="hljs-attr">content</span>:title}} = <span class="hljs-keyword">await</span> axios.<span class="hljs-title function_">get</span>(<span class="hljs-string">&#x27;https://api.uomg.com/api/rand.qinghua?format=json&#x27;</span>)
    <span class="hljs-comment">// 把请求回来的字符串，包装成一个对象</span>
    <span class="hljs-keyword">let</span> obj = {<span class="hljs-attr">id</span>:<span class="hljs-title function_">nanoid</span>(),title}
    <span class="hljs-comment">// 放到数组中</span>
    talkList.<span class="hljs-title function_">unshift</span>(obj)
  }
  <span class="hljs-keyword">return</span> {talkList,getATalk}
})
</code></pre>
<h1 id="6-组件通信">6. 组件通信</h1>
<p><strong><code>Vue3</code>组件通信和<code>Vue2</code>的区别：</strong></p>
<ul>
<li>移出事件总线，使用<code>mitt</code>代替。</li>
</ul>
<ul>
<li><code>vuex</code>换成了<code>pinia</code>。</li>
<li>把<code>.sync</code>优化到了<code>v-model</code>里面了。</li>
<li>把<code>$listeners</code>所有的东西，合并到<code>$attrs</code>中了。</li>
<li><code>$children</code>被砍掉了。</li>
</ul>
<p><strong>常见搭配形式：</strong></p>
<img src="file:///c:\workspace\vue3+ts\资料\images\image-20231119185900990.png" alt="image-20231119185900990" style="zoom:60%;" /> 
<h2 id="61-props">6.1. 【props】</h2>
<p>概述：<code>props</code>是使用频率最高的一种通信方式，常用与 ：<strong>父 ↔ 子</strong>。</p>
<ul>
<li>若 <strong>父传子</strong>：属性值是<strong>非函数</strong>。</li>
<li>若 <strong>子传父</strong>：属性值是<strong>函数</strong>。</li>
</ul>
<p>父组件：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;father&quot;&gt;
    &lt;h3&gt;父组件，&lt;/h3&gt;
		&lt;h4&gt;我的车：{{ car }}&lt;/h4&gt;
		&lt;h4&gt;儿子给的玩具：{{ toy }}&lt;/h4&gt;
		&lt;Child :car=&quot;car&quot; :getToy=&quot;getToy&quot;/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;Father&quot;&gt;
	import Child from './Child.vue'
	import { ref } from &quot;vue&quot;;
	// 数据
	const car = ref('奔驰')
	const toy = ref()
	// 方法
	function getToy(value:string){
		toy.value = value
	}
&lt;/script&gt;
</code></pre>
<p>子组件</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;child&quot;&gt;
    &lt;h3&gt;子组件&lt;/h3&gt;
		&lt;h4&gt;我的玩具：{{ toy }}&lt;/h4&gt;
		&lt;h4&gt;父给我的车：{{ car }}&lt;/h4&gt;
		&lt;button @click=&quot;getToy(toy)&quot;&gt;玩具给父亲&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;Child&quot;&gt;
	import { ref } from &quot;vue&quot;;
	const toy = ref('奥特曼')
	
	defineProps(['car','getToy'])
&lt;/script&gt;
</code></pre>
<h2 id="62-自定义事件">6.2. 【自定义事件】</h2>
<ol>
<li>概述：自定义事件常用于：<strong>子 =&gt; 父。</strong></li>
<li>注意区分好：原生事件、自定义事件。</li>
</ol>
<ul>
<li>原生事件：
<ul>
<li>事件名是特定的（<code>click</code>、<code>mosueenter</code>等等）</li>
<li>事件对象<code>$event</code>: 是包含事件相关信息的对象（<code>pageX</code>、<code>pageY</code>、<code>target</code>、<code>keyCode</code>）</li>
</ul>
</li>
<li>自定义事件：
<ul>
<li>事件名是任意名称</li>
<li><strong style="color:red">事件对象<code>$event</code>: 是调用<code>emit</code>时所提供的数据，可以是任意类型！！！</strong ></li>
</ul>
</li>
</ul>
<ol start="3">
<li>
<p>示例：</p>
<pre><code class="language-html"><span class="hljs-comment">&lt;!--在父组件中，给子组件绑定自定义事件：--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Child</span> @<span class="hljs-attr">send-toy</span>=<span class="hljs-string">&quot;toy = $event&quot;</span>/&gt;</span>

<span class="hljs-comment">&lt;!--注意区分原生事件与自定义事件中的$event--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;toy = $event&quot;</span>&gt;</span>测试<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
</code></pre>
<pre><code class="language-js"><span class="hljs-comment">//子组件中，触发事件：</span>
<span class="hljs-variable language_">this</span>.$emit(<span class="hljs-string">&#x27;send-toy&#x27;</span>, 具体数据)
</code></pre>
</li>
</ol>
<h2 id="63-mitt">6.3. 【mitt】</h2>
<p>概述：与消息订阅与发布（<code>pubsub</code>）功能类似，可以实现任意组件间通信。</p>
<p>安装<code>mitt</code></p>
<pre><code class="language-shell">npm i mitt
</code></pre>
<p>新建文件：<code>src\utils\emitter.ts</code></p>
<pre><code class="language-javascript"><span class="hljs-comment">// 引入mitt </span>
<span class="hljs-keyword">import</span> mitt <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;mitt&quot;</span>;

<span class="hljs-comment">// 创建emitter</span>
<span class="hljs-keyword">const</span> emitter = <span class="hljs-title function_">mitt</span>()

<span class="hljs-comment">/*
  // 绑定事件
  emitter.on(&#x27;abc&#x27;,(value)=&gt;{
    console.log(&#x27;abc事件被触发&#x27;,value)
  })
  emitter.on(&#x27;xyz&#x27;,(value)=&gt;{
    console.log(&#x27;xyz事件被触发&#x27;,value)
  })

  setInterval(() =&gt; {
    // 触发事件
    emitter.emit(&#x27;abc&#x27;,666)
    emitter.emit(&#x27;xyz&#x27;,777)
  }, 1000);

  setTimeout(() =&gt; {
    // 清理事件
    emitter.all.clear()
  }, 3000); 
*/</span>

<span class="hljs-comment">// 创建并暴露mitt</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> emitter
</code></pre>
<p>接收数据的组件中：绑定事件、同时在销毁前解绑事件：</p>
<pre><code class="language-typescript"><span class="hljs-keyword">import</span> emitter <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/utils/emitter&quot;</span>;
<span class="hljs-keyword">import</span> { onUnmounted } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;

<span class="hljs-comment">// 绑定事件</span>
emitter.<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;send-toy&#x27;</span>,<span class="hljs-function">(<span class="hljs-params">value</span>)=&gt;</span>{
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;send-toy事件被触发&#x27;</span>,value)
})

<span class="hljs-title function_">onUnmounted</span>(<span class="hljs-function">()=&gt;</span>{
  <span class="hljs-comment">// 解绑事件</span>
  emitter.<span class="hljs-title function_">off</span>(<span class="hljs-string">&#x27;send-toy&#x27;</span>)
})
</code></pre>
<p>【第三步】：提供数据的组件，在合适的时候触发事件</p>
<pre><code class="language-javascript"><span class="hljs-keyword">import</span> emitter <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/utils/emitter&quot;</span>;

<span class="hljs-keyword">function</span> <span class="hljs-title function_">sendToy</span>(<span class="hljs-params"></span>){
  <span class="hljs-comment">// 触发事件</span>
  emitter.<span class="hljs-title function_">emit</span>(<span class="hljs-string">&#x27;send-toy&#x27;</span>,toy.<span class="hljs-property">value</span>)
}
</code></pre>
<p><strong>注意这个重要的内置关系，总线依赖着这个内置关系</strong></p>
<h2 id="64v-model">6.4.【v-model】</h2>
<ol>
<li>
<p>概述：实现 <strong>父↔子</strong> 之间相互通信。</p>
</li>
<li>
<p>前序知识 —— <code>v-model</code>的本质</p>
<pre><code class="language-vue">&lt;!-- 使用v-model指令 --&gt;
&lt;input type=&quot;text&quot; v-model=&quot;userName&quot;&gt;

&lt;!-- v-model的本质是下面这行代码 --&gt;
&lt;input 
  type=&quot;text&quot; 
  :value=&quot;userName&quot; 
  @input=&quot;userName =(&lt;HTMLInputElement&gt;$event.target).value&quot;
&gt;
</code></pre>
</li>
<li>
<p>组件标签上的<code>v-model</code>的本质：<code>:moldeValue</code> ＋ <code>update:modelValue</code>事件。</p>
<pre><code class="language-vue">&lt;!-- 组件标签上使用v-model指令 --&gt;
&lt;AtguiguInput v-model=&quot;userName&quot;/&gt;

&lt;!-- 组件标签上v-model的本质 --&gt;
&lt;AtguiguInput :modelValue=&quot;userName&quot; @update:model-value=&quot;userName = $event&quot;/&gt;
</code></pre>
<p><code>AtguiguInput</code>组件中：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;box&quot;&gt;
    &lt;!--将接收的value值赋给input元素的value属性，目的是：为了呈现数据 --&gt;
		&lt;!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件--&gt;
    &lt;input 
       type=&quot;text&quot; 
       :value=&quot;modelValue&quot; 
       @input=&quot;emit('update:model-value',$event.target.value)&quot;
    &gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;AtguiguInput&quot;&gt;
  // 接收props
  defineProps(['modelValue'])
  // 声明事件
  const emit = defineEmits(['update:model-value'])
&lt;/script&gt;
</code></pre>
</li>
<li>
<p>也可以更换<code>value</code>，例如改成<code>abc</code></p>
<pre><code class="language-vue">&lt;!-- 也可以更换value，例如改成abc--&gt;
&lt;AtguiguInput v-model:abc=&quot;userName&quot;/&gt;

&lt;!-- 上面代码的本质如下 --&gt;
&lt;AtguiguInput :abc=&quot;userName&quot; @update:abc=&quot;userName = $event&quot;/&gt;
</code></pre>
<p><code>AtguiguInput</code>组件中：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;box&quot;&gt;
    &lt;input 
       type=&quot;text&quot; 
       :value=&quot;abc&quot; 
       @input=&quot;emit('update:abc',$event.target.value)&quot;
    &gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;AtguiguInput&quot;&gt;
  // 接收props
  defineProps(['abc'])
  // 声明事件
  const emit = defineEmits(['update:abc'])
&lt;/script&gt;
</code></pre>
</li>
<li>
<p>如果<code>value</code>可以更换，那么就可以在组件标签上多次使用<code>v-model</code></p>
<pre><code class="language-vue">&lt;AtguiguInput v-model:abc=&quot;userName&quot; v-model:xyz=&quot;password&quot;/&gt;
</code></pre>
</li>
</ol>
<h2 id="65attrs-">6.5.【$attrs 】</h2>
<ol>
<li>
<p>概述：<code>$attrs</code>用于实现<strong>当前组件的父组件</strong>，向<strong>当前组件的子组件</strong>通信（<strong>祖→孙</strong>）。</p>
</li>
<li>
<p>具体说明：<code>$attrs</code>是一个对象，包含所有父组件传入的标签属性。</p>
<blockquote>
<p>注意：<code>$attrs</code>会自动排除<code>props</code>中声明的属性(可以认为声明过的 <code>props</code> 被子组件自己“消费”了)</p>
</blockquote>
</li>
</ol>
<p>父组件：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;father&quot;&gt;
    &lt;h3&gt;父组件&lt;/h3&gt;
		&lt;Child :a=&quot;a&quot; :b=&quot;b&quot; :c=&quot;c&quot; :d=&quot;d&quot; v-bind=&quot;{x:100,y:200}&quot; :updateA=&quot;updateA&quot;/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;Father&quot;&gt;
	import Child from './Child.vue'
	import { ref } from &quot;vue&quot;;
	let a = ref(1)
	let b = ref(2)
	let c = ref(3)
	let d = ref(4)

	function updateA(value){
		a.value = value
	}
&lt;/script&gt;
</code></pre>
<p>子组件：</p>
<pre><code class="language-vue">&lt;template&gt;
	&lt;div class=&quot;child&quot;&gt;
		&lt;h3&gt;子组件&lt;/h3&gt;
		&lt;GrandChild v-bind=&quot;$attrs&quot;/&gt;
	&lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;Child&quot;&gt;
	import GrandChild from './GrandChild.vue'
&lt;/script&gt;
</code></pre>
<p>孙组件：</p>
<pre><code class="language-vue">&lt;template&gt;
	&lt;div class=&quot;grand-child&quot;&gt;
		&lt;h3&gt;孙组件&lt;/h3&gt;
		&lt;h4&gt;a：{{ a }}&lt;/h4&gt;
		&lt;h4&gt;b：{{ b }}&lt;/h4&gt;
		&lt;h4&gt;c：{{ c }}&lt;/h4&gt;
		&lt;h4&gt;d：{{ d }}&lt;/h4&gt;
		&lt;h4&gt;x：{{ x }}&lt;/h4&gt;
		&lt;h4&gt;y：{{ y }}&lt;/h4&gt;
		&lt;button @click=&quot;updateA(666)&quot;&gt;点我更新A&lt;/button&gt;
	&lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;GrandChild&quot;&gt;
	defineProps(['a','b','c','d','x','y','updateA'])
&lt;/script&gt;
</code></pre>
<h2 id="66-refsparent">6.6. 【$refs、$parent】</h2>
<ol>
<li>
<p>概述：</p>
<ul>
<li><code>$refs</code>用于 ：<strong>父→子。</strong></li>
<li><code>$parent</code>用于：<strong>子→父。</strong></li>
</ul>
</li>
<li>
<p>原理如下：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$refs</code></td>
<td>值为对象，包含所有被<code>ref</code>属性标识的<code>DOM</code>元素或组件实例。</td>
</tr>
<tr>
<td><code>$parent</code></td>
<td>值为对象，当前组件的父组件实例对象。</td>
</tr>
</tbody>
</table>
</li>
</ol>
<h2 id="67-provideinject">6.7. 【provide、inject】</h2>
<ol>
<li>
<p>概述：实现<strong>祖孙组件</strong>直接通信</p>
</li>
<li>
<p>具体使用：</p>
<ul>
<li>在祖先组件中通过<code>provide</code>配置向后代组件提供数据</li>
<li>在后代组件中通过<code>inject</code>配置来声明接收数据</li>
</ul>
</li>
<li>
<p>具体编码：</p>
<p>【第一步】父组件中，使用<code>provide</code>提供数据</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;father&quot;&gt;
    &lt;h3&gt;父组件&lt;/h3&gt;
    &lt;h4&gt;资产：{{ money }}&lt;/h4&gt;
    &lt;h4&gt;汽车：{{ car }}&lt;/h4&gt;
    &lt;button @click=&quot;money += 1&quot;&gt;资产+1&lt;/button&gt;
    &lt;button @click=&quot;car.price += 1&quot;&gt;汽车价格+1&lt;/button&gt;
    &lt;Child/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;Father&quot;&gt;
  import Child from './Child.vue'
  import { ref,reactive,provide } from &quot;vue&quot;;
  // 数据
  let money = ref(100)
  let car = reactive({
    brand:'奔驰',
    price:100
  })
  // 用于更新money的方法
  function updateMoney(value:number){
    money.value += value
  }
  // 提供数据
  provide('moneyContext',{money,updateMoney})
  provide('car',car)
&lt;/script&gt;
</code></pre>
<blockquote>
<p>注意：子组件中不用编写任何东西，是不受到任何打扰的</p>
</blockquote>
<p>【第二步】孙组件中使用<code>inject</code>配置项接受数据。</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;grand-child&quot;&gt;
    &lt;h3&gt;我是孙组件&lt;/h3&gt;
    &lt;h4&gt;资产：{{ money }}&lt;/h4&gt;
    &lt;h4&gt;汽车：{{ car }}&lt;/h4&gt;
    &lt;button @click=&quot;updateMoney(6)&quot;&gt;点我&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang=&quot;ts&quot; name=&quot;GrandChild&quot;&gt;
  import { inject } from 'vue';
  // 注入数据
 let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=&gt;{}})
  let car = inject('car')
</code></pre>
</li>
</ol>
</script>
   ```
<h2 id="68-pinia">6.8. 【pinia】</h2>
<p>参考之前<code>pinia</code>部分的讲解</p>
<h2 id="69-slot">6.9. 【slot】</h2>
<h3 id="1-默认插槽">1. 默认插槽</h3>
<p><img src="http://49.232.112.44/images/default_slot.png" alt="img"></p>
<pre><code class="language-vue">父组件中：
        &lt;Category title=&quot;今日热门游戏&quot;&gt;
          &lt;ul&gt;
            &lt;li v-for=&quot;g in games&quot; :key=&quot;g.id&quot;&gt;{{ g.name }}&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/Category&gt;
子组件中：
        &lt;template&gt;
          &lt;div class=&quot;item&quot;&gt;
            &lt;h3&gt;{{ title }}&lt;/h3&gt;
            &lt;!-- 默认插槽 --&gt;
            &lt;slot&gt;&lt;/slot&gt;
          &lt;/div&gt;
        &lt;/template&gt;
</code></pre>
<h3 id="2-具名插槽">2. 具名插槽</h3>
<pre><code class="language-vue">父组件中：
        &lt;Category title=&quot;今日热门游戏&quot;&gt;
          &lt;template v-slot:s1&gt;
            &lt;ul&gt;
              &lt;li v-for=&quot;g in games&quot; :key=&quot;g.id&quot;&gt;{{ g.name }}&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/template&gt;
          &lt;template #s2&gt;
            &lt;a href=&quot;&quot;&gt;更多&lt;/a&gt;
          &lt;/template&gt;
        &lt;/Category&gt;
子组件中：
        &lt;template&gt;
          &lt;div class=&quot;item&quot;&gt;
            &lt;h3&gt;{{ title }}&lt;/h3&gt;
            &lt;slot name=&quot;s1&quot;&gt;&lt;/slot&gt;
            &lt;slot name=&quot;s2&quot;&gt;&lt;/slot&gt;
          &lt;/div&gt;
        &lt;/template&gt;
</code></pre>
<h3 id="3-作用域插槽">3. 作用域插槽</h3>
<ol>
<li>
<p>理解：<span style="color:red">数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（新闻数据在<code>News</code>组件中，但使用数据所遍历出来的结构由<code>App</code>组件决定）</p>
</li>
<li>
<p>具体编码：</p>
<pre><code class="language-vue">父组件中：
      &lt;Game v-slot=&quot;params&quot;&gt;
      &lt;!-- &lt;Game v-slot:default=&quot;params&quot;&gt; --&gt;
      &lt;!-- &lt;Game #default=&quot;params&quot;&gt; --&gt;
        &lt;ul&gt;
          &lt;li v-for=&quot;g in params.games&quot; :key=&quot;g.id&quot;&gt;{{ g.name }}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/Game&gt;

子组件中：
      &lt;template&gt;
        &lt;div class=&quot;category&quot;&gt;
          &lt;h2&gt;今日游戏榜单&lt;/h2&gt;
          &lt;slot :games=&quot;games&quot; a=&quot;哈哈&quot;&gt;&lt;/slot&gt;
        &lt;/div&gt;
      &lt;/template&gt;

      &lt;script setup lang=&quot;ts&quot; name=&quot;Category&quot;&gt;
        import {reactive} from 'vue'
        let games = reactive([
          {id:'asgdytsa01',name:'英雄联盟'},
          {id:'asgdytsa02',name:'王者荣耀'},
          {id:'asgdytsa03',name:'红色警戒'},
          {id:'asgdytsa04',name:'斗罗大陆'}
        ])
      &lt;/script&gt;
</code></pre>
</li>
</ol>
<h1 id="7-其它-api">7. 其它 API</h1>
<h2 id="71shallowref-与-shallowreactive-">7.1.【shallowRef 与 shallowReactive 】</h2>
<h3 id="shallowref"><code>shallowRef</code></h3>
<ol>
<li>
<p>作用：创建一个响应式数据，但只对顶层属性进行响应式处理。</p>
</li>
<li>
<p>用法：</p>
<pre><code class="language-js"><span class="hljs-keyword">let</span> myVar = <span class="hljs-title function_">shallowRef</span>(initialValue);
</code></pre>
</li>
<li>
<p>特点：只跟踪引用值的变化，不关心值内部的属性变化。</p>
</li>
</ol>
<h3 id="shallowreactive"><code>shallowReactive</code></h3>
<ol>
<li>
<p>作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的</p>
</li>
<li>
<p>用法：</p>
<pre><code class="language-js"><span class="hljs-keyword">const</span> myObj = <span class="hljs-title function_">shallowReactive</span>({ ... });
</code></pre>
</li>
<li>
<p>特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。</p>
</li>
</ol>
<h3 id="总结">总结</h3>
<blockquote>
<p>通过使用 <a href="https://cn.vuejs.org/api/reactivity-advanced.html#shallowref"><code>shallowRef()</code></a> 和 <a href="https://cn.vuejs.org/api/reactivity-advanced.html#shallowreactive"><code>shallowReactive()</code></a> 来绕开深度响应。浅层式 <code>API</code> 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。</p>
</blockquote>
<h2 id="72readonly-与-shallowreadonly">7.2.【readonly 与 shallowReadonly】</h2>
<h3 id="readonly"><strong><code>readonly</code></strong></h3>
<ol>
<li>
<p>作用：用于创建一个对象的深只读副本。</p>
</li>
<li>
<p>用法：</p>
<pre><code class="language-js"><span class="hljs-keyword">const</span> original = <span class="hljs-title function_">reactive</span>({ ... });
<span class="hljs-keyword">const</span> readOnlyCopy = <span class="hljs-title function_">readonly</span>(original);
</code></pre>
</li>
<li>
<p>特点：</p>
<ul>
<li>对象的所有嵌套属性都将变为只读。</li>
<li>任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。</li>
</ul>
</li>
<li>
<p>应用场景：</p>
<ul>
<li>创建不可变的状态快照。</li>
<li>保护全局状态或配置不被修改。</li>
</ul>
</li>
</ol>
<h3 id="shallowreadonly"><strong><code>shallowReadonly</code></strong></h3>
<ol>
<li>
<p>作用：与 <code>readonly</code> 类似，但只作用于对象的顶层属性。</p>
</li>
<li>
<p>用法：</p>
<pre><code class="language-js"><span class="hljs-keyword">const</span> original = <span class="hljs-title function_">reactive</span>({ ... });
<span class="hljs-keyword">const</span> shallowReadOnlyCopy = <span class="hljs-title function_">shallowReadonly</span>(original);
</code></pre>
</li>
<li>
<p>特点：</p>
<ul>
<li>
<p>只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。</p>
</li>
<li>
<p>适用于只需保护对象顶层属性的场景。</p>
</li>
</ul>
</li>
</ol>
<h2 id="73toraw-与-markraw">7.3.【toRaw 与 markRaw】</h2>
<h3 id="toraw"><code>toRaw</code></h3>
<ol>
<li>
<p>作用：用于获取一个响应式对象的原始对象， <code>toRaw</code> 返回的对象不再是响应式的，不会触发视图更新。</p>
<blockquote>
<p>官网描述：这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。</p>
</blockquote>
<blockquote>
<p>何时使用？ —— 在需要将响应式对象传递给非 <code>Vue</code> 的库或外部系统时，使用 <code>toRaw</code> 可以确保它们收到的是普通对象</p>
</blockquote>
</li>
<li>
<p>具体编码：</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> { reactive,toRaw,markRaw,isReactive } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;

<span class="hljs-comment">/* toRaw */</span>
<span class="hljs-comment">// 响应式对象</span>
<span class="hljs-keyword">let</span> person = <span class="hljs-title function_">reactive</span>({<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;tony&#x27;</span>,<span class="hljs-attr">age</span>:<span class="hljs-number">18</span>})
<span class="hljs-comment">// 原始对象</span>
<span class="hljs-keyword">let</span> rawPerson = <span class="hljs-title function_">toRaw</span>(person)


<span class="hljs-comment">/* markRaw */</span>
<span class="hljs-keyword">let</span> citysd = <span class="hljs-title function_">markRaw</span>([
  {<span class="hljs-attr">id</span>:<span class="hljs-string">&#x27;asdda01&#x27;</span>,<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;北京&#x27;</span>},
  {<span class="hljs-attr">id</span>:<span class="hljs-string">&#x27;asdda02&#x27;</span>,<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;上海&#x27;</span>},
  {<span class="hljs-attr">id</span>:<span class="hljs-string">&#x27;asdda03&#x27;</span>,<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;天津&#x27;</span>},
  {<span class="hljs-attr">id</span>:<span class="hljs-string">&#x27;asdda04&#x27;</span>,<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;重庆&#x27;</span>}
])
<span class="hljs-comment">// 根据原始对象citys去创建响应式对象citys2 —— 创建失败，因为citys被markRaw标记了</span>
<span class="hljs-keyword">let</span> citys2 = <span class="hljs-title function_">reactive</span>(citys)
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">isReactive</span>(person))
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">isReactive</span>(rawPerson))
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">isReactive</span>(citys))
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">isReactive</span>(citys2))
</code></pre>
</li>
</ol>
<h3 id="markraw"><code>markRaw</code></h3>
<ol>
<li>
<p>作用：标记一个对象，使其<strong>永远不会</strong>变成响应式的。</p>
<blockquote>
<p>例如使用<code>mockjs</code>时，为了防止误把<code>mockjs</code>变为响应式对象，可以使用 <code>markRaw</code> 去标记<code>mockjs</code></p>
</blockquote>
</li>
<li>
<p>编码：</p>
<pre><code class="language-js"><span class="hljs-comment">/* markRaw */</span>
<span class="hljs-keyword">let</span> citys = <span class="hljs-title function_">markRaw</span>([
  {<span class="hljs-attr">id</span>:<span class="hljs-string">&#x27;asdda01&#x27;</span>,<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;北京&#x27;</span>},
  {<span class="hljs-attr">id</span>:<span class="hljs-string">&#x27;asdda02&#x27;</span>,<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;上海&#x27;</span>},
  {<span class="hljs-attr">id</span>:<span class="hljs-string">&#x27;asdda03&#x27;</span>,<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;天津&#x27;</span>},
  {<span class="hljs-attr">id</span>:<span class="hljs-string">&#x27;asdda04&#x27;</span>,<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;重庆&#x27;</span>}
])
<span class="hljs-comment">// 根据原始对象citys去创建响应式对象citys2 —— 创建失败，因为citys被markRaw标记了</span>
<span class="hljs-keyword">let</span> citys2 = <span class="hljs-title function_">reactive</span>(citys)
</code></pre>
</li>
</ol>
<h2 id="74customref">7.4.【customRef】</h2>
<p>作用：创建一个自定义的<code>ref</code>，并对其依赖项跟踪和更新触发进行逻辑控制。</p>
<p>实现防抖效果（<code>useSumRef.ts</code>）：</p>
<pre><code class="language-typescript"><span class="hljs-keyword">import</span> {customRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span>(<span class="hljs-params">initValue:<span class="hljs-built_in">string</span>,delay:<span class="hljs-built_in">number</span></span>){
  <span class="hljs-keyword">let</span> msg = <span class="hljs-title function_">customRef</span>(<span class="hljs-function">(<span class="hljs-params">track,trigger</span>)=&gt;</span>{
    <span class="hljs-keyword">let</span> <span class="hljs-attr">timer</span>:<span class="hljs-built_in">number</span>
    <span class="hljs-keyword">return</span> {
      <span class="hljs-title function_">get</span>(<span class="hljs-params"></span>){
        <span class="hljs-title function_">track</span>() <span class="hljs-comment">// 告诉Vue数据msg很重要，要对msg持续关注，一旦变化就更新</span>
        <span class="hljs-keyword">return</span> initValue
      },
      <span class="hljs-title function_">set</span>(<span class="hljs-params">value</span>){
        <span class="hljs-built_in">clearTimeout</span>(timer)
        timer = <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {
          initValue = value
          <span class="hljs-title function_">trigger</span>() <span class="hljs-comment">//通知Vue数据msg变化了</span>
        }, delay);
      }
    }
  }) 
  <span class="hljs-keyword">return</span> {msg}
}
</code></pre>
<p>组件中使用：</p>
<h1 id="8-vue3新组件">8. Vue3新组件</h1>
<h2 id="81-teleport">8.1. 【Teleport】</h2>
<ul>
<li>什么是Teleport？—— Teleport 是一种能够将我们的<strong>组件html结构</strong>移动到指定位置的技术。</li>
</ul>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">teleport</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&#x27;body&#x27;</span> &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;modal&quot;</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;isShow&quot;</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是一个弹窗<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我是弹窗中的一些内容<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;isShow = false&quot;</span>&gt;</span>关闭弹窗<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">teleport</span>&gt;</span>
</code></pre>
<h2 id="82-suspense">8.2. 【Suspense】</h2>
<ul>
<li>等待异步组件时渲染一些额外内容，让应用有更好的用户体验</li>
<li>使用步骤：
<ul>
<li>异步引入组件</li>
<li>使用<code>Suspense</code>包裹组件，并配置好<code>default</code> 与 <code>fallback</code></li>
</ul>
</li>
</ul>
<pre><code class="language-tsx"><span class="hljs-keyword">import</span> { defineAsyncComponent,<span class="hljs-title class_">Suspense</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;
<span class="hljs-keyword">const</span> <span class="hljs-title class_">Child</span> = <span class="hljs-title function_">defineAsyncComponent</span>(<span class="hljs-function">()=&gt;</span><span class="hljs-title function_">import</span>(<span class="hljs-string">&#x27;./Child.vue&#x27;</span>))
</code></pre>
<pre><code class="language-vue">&lt;template&gt;
    &lt;div class=&quot;app&quot;&gt;
        &lt;h3&gt;我是App组件&lt;/h3&gt;
        &lt;Suspense&gt;
          &lt;template v-slot:default&gt;
            &lt;Child/&gt;
          &lt;/template&gt;
          &lt;template v-slot:fallback&gt;
            &lt;h3&gt;加载中.......&lt;/h3&gt;
          &lt;/template&gt;
        &lt;/Suspense&gt;
    &lt;/div&gt;
&lt;/template&gt;
</code></pre>
<h2 id="83全局api转移到应用对象">8.3.【全局API转移到应用对象】</h2>
<ul>
<li><code>app.component</code></li>
<li><code>app.config</code></li>
<li><code>app.directive</code></li>
<li><code>app.mount</code></li>
<li><code>app.unmount</code></li>
<li><code>app.use</code></li>
</ul>
<h2 id="84其他">8.4.【其他】</h2>
<ul>
<li>
<p>过渡类名 <code>v-enter</code> 修改为 <code>v-enter-from</code>、过渡类名 <code>v-leave</code> 修改为 <code>v-leave-from</code>。</p>
</li>
<li>
<p><code>keyCode</code> 作为 <code>v-on</code> 修饰符的支持。</p>
</li>
<li>
<p><code>v-model</code> 指令在组件上的使用已经被重新设计，替换掉了 <code>v-bind.sync。</code></p>
</li>
<li>
<p><code>v-if</code> 和 <code>v-for</code> 在同一个元素身上使用时的优先级发生了变化。</p>
</li>
<li>
<p>移除了<code>$on</code>、<code>$off</code> 和 <code>$once</code> 实例方法。</p>
</li>
<li>
<p>移除了过滤器 <code>filter</code>。</p>
</li>
<li>
<p>移除了<code>$children</code> 实例 <code>propert</code>。</p>
<p>......</p>
</li>
</ul>

            <script async src="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js"></script>
            
        </body>
        </html>